我们都知道,组件之间通过props 或者 $emit 传值都是单向数据流的。如果我们想实现双向数据流的话,我们通常的做法如下:
//父组件给子组件传入一个函数
<MyFooter :age="age" @setAge="(res)=> age = res">
</MyFooter>
//子组件通过调用这个函数来实现修改父组件的状态。
mounted () {
console.log(this.$emit('setAge',1234567));
}
这时子组件触发了父组件的修改函数使父组件的age修改成了1234567
但是这种写法又稍微有点复杂,其实我们可以使用 .sync 如下直接写:
//父组件将age传给子组件并使用.sync修饰符。
<MyFooter :age.sync="age">
</MyFooter>
//子组件触发事件
mounted () {
console.log(this.$emit('update:age',1234567));
}
这样就很简单的实现了,数据的双向流。
这里注意我们的事件名称被换成了<font color=red >update:age</font>
update:是被固定的也就是vue为我们约定好的名称部分
age是我们要修改的状态的名称,是我们手动配置的,与传入的状态名字对应起来
这样就完成了,是不是感觉简单了很多。
注意事项:
这里我们必须在事件执行名称前加上update:的前缀才能正确触发事件。