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: `
我是父组件,数据值是{{num}}
         
`,
       data() {
         return {num: Date.now()}
       }
     })
     Vue.component('son', {
       template: `
 我是子组件{{num}}
         修改num
       
`,
       props:['num'],
       methods: {
         hChange() {
           this.$emit('update:num', Date.now())
         }
       }
     })

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

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

Vue.component('parent', {
  template: `
我是父组件,数据值是{{num}}
    
`,
  data() {
    return {num: Date.now()}
  }
})
Vue.component('son', {
  template: `
 我是子组件{{value}}
    修改num
  
`,
  props:['value'],
  methods: {
    hChange() {
      this.$emit('input', Date.now())
    }
  }
})

小结