VUEdefineProps 怎么使用
时间: 2024-05-24 14:07:28 浏览: 14
Vue 3 中,我们可以使用 `defineProps` 来定义组件的 Props。`defineProps` 是一个函数,用于定义组件接收的 props,它接受一个对象作为参数,对象的每个属性都是一个 prop,并且每个 prop 都可以指定类型、默认值等配置。下面是一个简单的示例:
```
<script>
import { defineProps } from 'vue'
export default {
props: defineProps({
msg: String,
count: {
type: Number,
default: 0
},
items: {
type: Array,
default: () => []
}
})
}
</script>
```
在上面的示例中,我们使用 `defineProps` 定义了一个包含三个 props 的组件,分别是 `msg`、`count` 和 `items`。其中,`msg` 的类型是字符串类型,默认值为 `undefined`;`count` 的类型是数字类型,默认值为 `0`;`items` 的类型是数组类型,默认值为一个空数组。
在组件中使用这些 props 时,可以直接使用它们作为组件实例的属性来访问,如下所示:
```
<template>
<div>
<p>{{ msg }}</p>
<p>Count: {{ count }}</p>
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
```
当然,在使用 props 时,也可以通过传递 props 来覆盖它们的默认值,如下所示:
```
<template>
<HelloWorld msg="Welcome to Your Vue.js App" :count="10" :items="[ {id: 1, name: 'item 1'}, {id: 2, name: 'item 2'} ]" />
</template>
```
相关推荐
![xlsx](https://img-home.csdnimg.cn/images/20210720083732.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pptx](https://img-home.csdnimg.cn/images/20210720083543.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![xlsx](https://img-home.csdnimg.cn/images/20210720083732.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)