Vue 中的 .sync 修饰符有什么用

.sync修饰符

.sync是一个语法糖。sync 修饰符的作用就是实现父子组件数据的双向绑定，简化功能逻辑代码。是父组件监听子组件更新某个props的请求的缩写语法。

三条规则

• Vue规则：组件不能修改props外部数据
• Vue规则：$emit可以触发事件并传参
• Vue规则：$event可以获取$emit的参数

实例

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)
      }