vue2 父子组件实现双向绑定

2019独角兽企业重金招聘Python工程师标准>>>

vue2的版本:"2.5.2"

子组件中TestBiBind

this.$emit('update:multiple222', count++)

父组件中

<TestBiBind   :multiple222="multiple" @update:multiple222="val => multiple = val"></TestBiBind>

注意 at后面的字符串要和子组件中this.$emit 的第一个参数相同.

 

父组件中更优雅的方式

<TestBiBind  :multiple222.sync="multiple" ></TestBiBind>

vue2文档说明如下:

从 2.3.0 起我们重新引入了 .sync 修饰符，但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。

如下代码

<comp :foo.sync="bar"></comp>

会被扩展为：

<comp :foo="bar" @update:foo="val => bar = val"></comp>

当子组件需要更新 foo 的值时，它需要显式地触发一个更新事件：

this.$emit('update:foo', newValue)

 

转载于:https://my.oschina.net/huangweiindex/blog/1560779