父组件给子组件传值
# 父组件给子组件传值
父组件中,通过给子组件标签v-bind绑定属性的方式传入值
<ComponentName v-bind:name="value"></ComponentName>
1
如果不使用v-bind传入的值为字符串,使用v-bind绑定传入的值为表达式。 子组件中,通过props对象接收值
props: {
name: { // 接收父组件传入值
type: String || ...,
default: ''
}
}
1
2
3
4
5
6
2
3
4
5
6
# 单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。
子组件不能直接修改父组件传入的值
这里有两种常见的试图改变一个 prop 的情形:
- 这个 prop 用来传递一个初始值;这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下,最好定义一个本地的 data 属性并将这个 prop 用作其初始值:
props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
}
}
1
2
3
4
5
6
2
3
4
5
6
- 这个 prop 以一种原始的值传入且需要进行转换。在这种情况下,最好使用这个 prop 的值来定义一个计算属性:
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
1
2
3
4
5
6
2
3
4
5
6
# 父子组件间传递数据 demo
在GitHub上编辑 (opens new window)
上次更新: 4/27/2021, 11:18:01 AM