父子组件间的双向数据绑定

vue提供了.sync修饰符，说白了就是一种简写的方式，我们可以将其当作是一种语法糖，比如v-on: click可以简写为@click。sync修饰符，与我们平常使用$emit实现父子组件通信没有区别，只不过是写法上方便一些。

 

背景：

日常开发时，我们总会遇到需要父子组件双向绑定的问题，但是考虑到组件的可维护性，vue中是不允许子组件改变父组件传的props值的。那么同时，vue中也提供了一种解决方案.sync修饰符。在此之前，希望你已经知道了vue中是如何通过事件的方式实现子组件修改父组件的data的。

.sync修饰符：

首先我们知道，父组件通过绑定属性的方式向子组件传值，而在子组件中可以通过$emit向父组件通信，通过这种间接的方式改变父组件的data，从而实现子组件改变props的值。比如向下边这这样：

子组件使用$emit向父组件发送事件：

1. this.$emit('update:title', newTitle)

父组件监听这个事件并更新一个本地的数据title：

1. <text-document
2. :title="title"
3. @update:title="val => title = val"
4. ></text-document>

为了方便这种写法，vue提供了.sync修饰符，说白了就是一种简写的方式，我们可以将其当作是一种语法糖，比如v-on: click可以简写为@click。而上边父组件的这种写法，换成sync的方式就像下边这样：

1. <text-document
2. :title.sync="title"
3. ></text-document>

 

 

 

 

父组件通过:dialogswitch.sync绑定prop到子组件，实现父组件传递数据到子组件

子组件使用this.$emit( 'update:dialogswitch', 更新的数据 )修改父组件的数据, 实现子组件修改父组件数据