vue2 父子组件实现双向绑定

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)