关于.sync

最近在项目中有遇到使用.sync方法在父子组件里传值的情况:

在父组件里设置num.sync = "num"

在子组件里设置this.$emit('update:num',111)

在官方文档里是有这一部分内容的 (为什么官方文档里有的东西会在我的知识清单里挂那么久QAQ)

抄一下官方文档

为什么要用.sync: 因为在子组件里改变父组件的值很难检测到

底层原理:

会被解析为一个update函数

1
2
3
4
eg:
<comp :foo.sync="bar"></comp>
会被解析为:
<comp :foo="bar" @update:foo="val => bar = val"></comp>

注意事项

带有.sync修饰的v-bind不能和表达式一起使用

v-bind.sync可以用来绑定一个对象,这时它的每一个属性都会被监听.但是不要后面跟一个字面量对象(如{num:1})