Vue中的.sync 修饰符

.sync 修饰符可以让子组件改变父组件状态的代码更容易被区分，但是它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。它可以更方便的父子组件间的双向绑定。

在解释.sync 修饰符之前，我们需要了解 vue 之父子组件间是怎么样通信的。

通过 prop 实现通信

子组件的 props 选项能够接收来自父组件数据。没错，仅仅只能接收，props 是单向绑定的，即只能父组件向子组件传递，不能反向。

子组件通过 props 选项来声明一个自定义的属性，然后父组件就可以在嵌套标签的时候，通过这个属性往子组件传递数据了。但是我们更多的情况需要动态的数据。这时候就可以用 v-bind 来实现。通过 v-bind 绑定 props 的自定义的属性，传递去过的就不是静态的字符串了，它可以是一个表达式、布尔值、对象等等任何类型的值。

<!-- 父组件 -->
<template>
  <div>
    <h1>我是父组件！</h1>
    <child message="我是子组件一！"></child>

    <!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
    <child v-bind:message="a+b"></child>

    <!-- 用一个变量进行动态赋值。-->
    <child v-bind:message="msg"></child>
  </div>
</template>

<script>
  import Child from "../components/child.vue";
  export default {
    components: { Child },
    data() {
      return {
        a: "我是子组件二！",
        b: 112233,
        msg: "我是子组件三！" + Math.random()
      };
    }
  };
</script>

<!-- 子组件 -->
<template>
  <h3>{{message}}</h3>
</template>
<script>
  export default {
    props: ["message"]
  };
</script>

出来的效果是这样的：

通过$emit 实现通信

props 主要是父组件向子组件通信，而通过$emit 实现子组件向父组件通信。

$emit 绑定一个自定义事件 event，当这个这个语句被执行到的时候，就会将参数 arg 传递给父组件，父组件通过@event 监听并接收参数。

<template>
  <div>
    <h1>{{title}}</h1>
    <child @getMessage="showMsg"></child>
  </div>
</template>

<script>
  import Child from "../components/child.vue";
  export default {
    components: { Child },
    data() {
      return {
        title: ""
      };
    },
    methods: {
      showMsg(title) {
        this.title = title;
      }
    }
  };
</script>

<template>
  <h3>我是子组件！</h3>
</template>
<script>
  export default {
    mounted: function() {
      this.$emit("getMessage", "我是父组件！");
    }
  };
</script>

.sync 修饰符

通过将 props 和$emit 结合起来就可以实现父子组件的双向通信。

<div id="app">
  <div>{{bar}}</div>
  <my-comp :foo.sync="bar"></my-comp>
  <!-- <my-comp :foo="bar" @update:foo="val => bar = val"></my-comp> -->
</div>

<script>
  new Vue({
    el: "#app",
    data: { bar: 0 }
  });

  Vue.component("my-comp", {
    template: '<h3>{{foo}}</h3><div @click="increment">点我+1</div>',
    data: function() {
      return { copyFoo: this.foo };
    },
    props: ["foo"],
    methods: {
      increment: function() {
        this.$emit("update:foo", ++this.copyFoo);
      }
    }
  });
</script>

子组件通过“update:foo”事件将讲一个值传给父组件，父组件接收后再将这个值赋给变量“foo”,接着在通过 props 将这个“foo”，子组件又接收到了新值。就实现了双向通信。

在使用了.sync 后，

<comp :foo="bar" @update:foo="val => bar = val"></comp>

被简化为

<my-comp :foo.sync="bar"></my-comp>

可以看出 sync 就是一个语法糖，简化了父子组件双向通信的写法。