vue组件双向绑定.sync修饰符的一个坑

Posted 2020-10-31 CLtomoya

我们知道组件是单项的，但是有时候需要双向，这时候我们可以使用.sync修饰符，但今天遇到一个坑，一直不成功，花了半小时试出来的。。。。
在编程的时候我们很习惯冒号后面跟着空格。而.sync双向绑定需要子组件显性触发

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

这里的updata:foo可以说是一个名字，不能加空格，不能加空格，不能加空格！！！这就是坑，由于编程习惯，也许会有人加空格，我也是，所以写出来当作一个笔记。
根据文档

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

会被扩展为：

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

所以update:foo就是事件的名称，事件里面是一个函数，传入val参数赋值给bar变量。。。。所以update:foo是一个事件名，你加空格就完全变了一个事件名了。
至于怎么变，估计得看文档，我也不懂-_-