vue3 如何使用props?
时间: 2023-10-18 10:29:46 浏览: 49
在 Vue 3 中,你可以通过 `props` 选项来定义组件的属性,并在组件中使用。下面是一个简单的例子:
```vue
<template>
<div>
<h2>{{ message }}</h2>
</div>
</template>
<script>
export default {
props: {
message: {
type: String, // 属性的类型
required: true, // 是否必需
default: 'Hello', // 默认值
},
},
}
</script>
```
在上面的例子中,我们定义了一个名为 `message` 的属性,它的类型为字符串,是必需的,且默认值为 'Hello'。在模板中使用 `message` 变量来访问该属性的值。
当使用该组件时,你可以传递不同的值给 `message` 属性,如下所示:
```vue
<template>
<div>
<my-component message="Welcome to Vue 3"></my-component>
</div>
</template>
<script>
import MyComponent from './MyComponent.vue'
export default {
components: {
MyComponent,
},
}
</script>
```
在上面的例子中,我们在父组件中使用了 `my-component` 组件,并将 `message` 属性设置为 "Welcome to Vue 3"。
这样,`my-component` 组件就可以根据传入的属性值显示不同的信息了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)