Vue .sync作用

108 阅读1分钟

父子组件通信时,常规的传值操作是,父组件通过props向子组件传递参数和修改该参数的方法,由于子组件不能直接修改父组件传递过来的,需要由子组件触发($emit)父组件传过来的方法,让父组件修改对应的参数,从而使子组件的视图更新。
这个过程,如果用.sync来完成,会简化操作

//父组件
<demo-view-a
      :passData="passData"
      @update:passData="changeData"
 />
...          
methods: {
    changeData(val) {
      this.passData = val;
    },
  },

//等价于
<demo-view-a
      :passData="passData"
      @update:passData="
        (val) => {
          passData = val;
        }
      "
 />
 
 //等价于
<demo-view-a :passData.sync="passData" />
          
 //子组件
 <button @click="$emit('update:passData', '子组件改了')">更改passData</button>