Vue中.sync修饰符有什么用

第一步：先用一句话解释

.sync修饰符可以实现子组件与父组件的双向绑定，并且可以实现子组件同步修改父组件的值。

第二步：具体解释

一般情况下，想要实现父子组件间值的传递，通常使用的是 props 和自定义事件 $emit 。其中，父组件通过 props 将值传给子组件，子组件再通过$ emit 将值传给父组件，父组件通过事件j监听获取子组件传过来的值。如果想要简化这里的代码，可以使用.sync修饰符，实际上就是一个语法糖。

第三步：举一个例子来说明

Father.vue
<template>
  <div class="app">
     {{dataApp}}
    <hr>
    <Child :money.sync="dataApp"/>
    // <Child :money="dataApp" v-on:update:money="dataApp = $event"/>  //两句作用等同
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  data() {
    return { dataApp: 10000 };
  },
  components: { Child }
};
</script>
Child.vue
<template>
  <div class="child">
    {{money}}
    <button @click="$emit('update:money', money-100)">
    </button>
  </div>
</template>

<script>
export default {
  props: ["money"]
};
</script>

上面例子中，父组件传了一个参数 money 给子组件，

子组件通过$emit修改 money 后，将值同步到父组件。这里

<Child :money="dataApp" v-on:update:money="dataApp = $event"/>

就相当于

<Child :money.sync="dataApp"/>

再举个例子

父组件：

<template>
  <div id="FatherCom">
    <h4>我是父组件</h4>
    <div v-show="show">我是在隐藏与现实中飘忽不定的</div>
    <hr>
    <ChildCom :show="show" @update:show="update_show"/>
  </div>
</template>

<script>
  import ChildCom from './ChildCom'

  export default {
    name: 'FatherCom',
    components: {
      ChildCom
    },
    data() {
      return {
        show: true
      }
    },
    methods: {
      update_show(val) {
        this.show = val
      }
    }
  }
</script>

<style scoped>

</style>

子组件

<template>
  <div id="FatherCom">
    <h4>我是父组件</h4>
    <div v-show="show">能看得见我吗？</div>
    <hr>
    <ChildCom :show="show" @update:show="update_show"/>
  </div>
</template>

<script>
  import ChildCom from './ChildCom'

  export default {
    name: 'FatherCom',
    components: {
      ChildCom
    },
    data() {
      return {
        show: true
      }
    },
    methods: {
      update_show(val) {
        this.show = val
      }
    }
  }
</script>

<style scoped>

</style>

可以通过 .sync修饰符简化父组件的代码：

在子组件内触发的事件名要以 update:myPropName 方式命名(尤雨溪要求的)，

父组件 :show:show 加上.sync修饰符，即 :show.sync:show

这样设置父组件就不再需要单独再去绑定@update:show事件了。

<template>
  <div id="FatherCom">
    <h4>我是父组件</h4>
    <div v-show="show">能看得见我吗？</div>
    <hr>
    <!--<ChildCom :show="show" @update:show="update_show"/>-->
     <ChildCom :show.sync="show" />
  </div>
</template>

 handle(){
       	// 这里要求用 `update:myPropName` 方式命名
        this.$emit('update:show',!this.show)
      }