vue .sync的用法

它用来模拟实现父子组件的双向绑定。

问题

父组件中定义一个数据项，并传给子组件，子组件中可以对数据项进行修改，并同步到父组件中来。

sync解决

步骤

在普通的父传子的基础上添加.sync

<son :num.sync="numFormParent"></son>

在子组件中，正常定义props来接收数据，并补充一个特殊的事件出来以达到修改父组件中的数据的目标。

this.$emit('update:num', 新值)

这个特殊的事件名就是update:props名

代码

<div id="app">
   <parent></parent>
 </div>
 <script src="./vue.js"></script>
 <script>

     Vue.component('parent', {
       template: `<div class="box">我是父组件,数据值是{{num}}
         <son :num.sync="num"></son></div>`,
       data() {
         return {num: Date.now()}
       }
     })
     Vue.component('son', {
       template: `<div class="box"> 我是子组件{{num}}
         <button @click="hChange">修改num</button>
       </div>`,
       props:['num'],
       methods: {
         hChange() {
           this.$emit('update:num', Date.now())
         }
       }
     })

     var vm = new Vue({
         el: '#app'
     })
 </script>

同款代码使用v-model来实现

Vue.component('parent', {
  template: `<div class="box">我是父组件,数据值是{{num}}
    <son v-model="num"></son></div>`,
  data() {
    return {num: Date.now()}
  }
})
Vue.component('son', {
  template: `<div class="box"> 我是子组件{{value}}
    <button @click="hChange">修改num</button>
  </div>`,
  props:['value'],
  methods: {
    hChange() {
      this.$emit('input', Date.now())
    }
  }
})

小结