.sync数据双向绑定

1. 定义

父子组件使用.sync通信,子组件通过props接收传递的值(绑定的属性名自己决定),在子组件中通过$emit方法触发'update:属性名'事件,实现父子组件值同时变化

2. 案例解析

 // 父组件
 <Child :a.sync="num"></Child>
 <h2>
   父组件的num值: {{num}}
 </h2>

 // 子组件
 <h2>
   子组件接收的a值:{{a}}
 </h2>
 <button @click="change">
   点击改变父组件的num
 </button>
 ​
 <script>
   // 此处省略exports 和 methods 和 props
   change(){
     // $emit事件来触发update来监听a的值,从而改变父组件中num的值,父组件跟着变化,实现双向绑定
     this.$emit('update:a', this.a+1)
   }
 </script>

• 子组件中触发事件一次,a的值会加一,同时,父组件中num的值也会加一保持一致变化.

3. 原理

• 利用eventBus,在子组件使用$emit('update.a', this.a+)来通知父组件去响应,而父组件通过$event来接收经过子组件修改后的值
• update是vue中规定的语法书写格式,a是被绑定的数据,this.a+是带给父组件值的变化