vue2子父组件传值props
时间: 2024-08-14 15:02:03 浏览: 54
在Vue 2中,父子组件之间的数据传递通常是通过`props`属性完成的。`props`是父组件向子组件“props”(即特性、属性的意思)的一种单向数据绑定机制。以下是基本的使用步骤:
1. 父组件向子组件传递数据:
- 定义一个prop在父组件模板上,例如:
```html
<child-component :value="parentValue"></child-component>
```
- `:`前是 prop 的名称,`value`是对子组件暴露的 prop 的名字;`parentValue`则是父组件的数据。
2. 子组件接收数据:
- 在子组件的`script`部分,通过`props`选项声明接收到的属性:
```javascript
export default {
props: {
value: {
type: String, // 或者 Number, Object, Array等类型
required: true, // 是否必填,默认是 false
default: 'default_value', // 默认值
}
},
// ...
}
```
3. 使用接收到的数据:
- 在子组件内部,可以直接使用这个属性:
```vue
<template>
<div>{{ value }}</div> <!-- 显示接收到的值 -->
</template>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)