Vue之实现props双向绑定

vue2.0版本的props遵循单项数据流的准则,目的是防止双向绑定导致数据流向改动混乱,但业务中难免遇到需要对props进行双向绑定,封装子组件调用,实现组件的高复用性,例如element ui组件中的组件设计亦是如此。
通过阅读element ui的一些组件观察发现实现双向绑定功能的一个技术点是snyc修饰符,例如dialog组件:



当在父组件内调用子组件时使用了.sync修饰符,则可以在子组件内改变props,子组件内修改props方法如下:

// dialog组件
this.$emit('update:visible', true/false); // update:后面声明的是要更新的props属性,this.$emit第二个参数是修改的值

你可能感兴趣的:(vue)