Vue修饰符sync详解

首先官方文档
没看懂？不急，我们来举个详细讲讲吧
在说vue 修饰符sync前，我们先看下官方文档：vue .sync 修饰符，里面说vue .sync 修饰符以前存在于vue1.0版本里，但是在在 2.0 中移除了 .sync 。但是在 2.0 发布之后的实际应用中，我们发现 .sync 还是有其适用之处，比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分。从 2.3.0 起我们重新引入了 .sync 修饰符，但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。
示例代码如下：

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

会被扩展为：

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

当子组件需要更新 foo 的值时，它需要显式地触发一个更新事件：

this.$emit('update:foo', newValue)

猛一看不明白，下边我么通过一个实例（弹窗的关闭事件）来说明这个代码到底是怎么运用的。

<template>
  <div class="details">
    <mySync
      :show.sync="valueChild"
      style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"
    ></mySync>
    <button @click="changeValue">toggle</button>
  </div>
</template>
<script>
//import Vue from "vue";用这个会报错
import Vue from "vue/dist/vue.esm.js";//最后把main.js里也换成了这个方法就可以了

export default {
  data() {
    return {
      valueChild: true,
    };
  },
  created() {
    Vue.component("mySync", {
      template: `<div v-if="show">
                    <p>默认初始值是{{show}}，所以是显示的</p>
                    <button @click.stop="closeDiv">关闭</button>
                 </div>`,
      props: ["show"],
      name: "mySync",
      methods: {
        closeDiv() {
          this.$emit("update:show", false); //触发 input 事件，并传入新值
        },
      },
    });
  },
  methods: {
    changeValue() {
      this.valueChild = !this.valueChild;
    },
  },
};
</script>

动态效果如下：

vue 修饰符sync的功能是：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。如果我们不用.sync，我们想做上面的那个弹窗功能，我们也可以props传初始值，然后事件监听，实现起来也不算复杂。这里用sync实现，只是给大家提供一个思路，让其明白他的实现原理，可能有其它复杂的功能适用sync。
如果不用.sync，用传统的子传递给方法也是可以的：

<template>
  <div class="details">
    <mySync
      :show="valueChild"
      @show="changeValue"
      style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"
    ></mySync>
    <button @click="changeValue">toggle</button>
  </div>
</template>
<script>
//import Vue from "vue";
import Vue from "vue/dist/vue.esm.js";

export default {
  data() {
    return {
      valueChild: true,
    };
  },
  created() {
    Vue.component("mySync", {
      template: `<div v-if="show">
                    <p>默认初始值是{{show}}，所以是显示的</p>
                    <button @click.stop="closeDiv">关闭</button>
                 </div>`,
      props: ["show"],
      name: "mySync",
      methods: {
        closeDiv() {
          this.$emit("show"); //触发 input 事件，并传入新值
        },
      },
    });
  },
  methods: {
    changeValue() {
      this.valueChild = !this.valueChild;
    },
  },
};
</script>

再来一个例子
syncFather.vue:

<template>
  <div class="hello">
    <!-- //input实时改变wrd的值, 并且会实时改变box里的内容 -->
    <input type="text" v-model="wrd" />
    <hr />
    这是name---{{ sname }}
    <!-- 不写sync不更新父组件数据，变成了单向的父组件传值给子组件的写法 -->
    <box :word.sync="wrd" :sname.sync="sname"></box>
  </div>
</template>

<script>
import box from "./syncChild.vue"; //引入box子组件
export default {
  name: "HelloWorld",
  data() {
    return {
      wrd: "",
      sname: "zs",
      age: 12,
    };
  },
  components: {
    box,
  },
};
</script>

syncChild.vue

<template>
  <div class="hello">
    <div class="ipt">
      <hr />
      ---------------------------------------------
      <br />
      <input type="text" v-model="str" />
    </div>

    //word是父元素传过来的
    <br />
    <h2>{{ word }}</h2>
    <br />
    //sname也是
    <br />
    <h2>{{ sname }}</h2>
  </div>
</template>

<script>
export default {
  name: "box",
  data() {
    return {
      str: "",
    };
  },
  props: {
    word: {
      type: String,
      default: "",
    },
    sname: {
      type: String,
      default: "ls",
    },
  },
  watch: {
    str: function(newValue, oldValue) {
      //每当str的值改变则发送事件update:sname , 并且把值传过去，这时会修改父组件的data值
      this.$emit("update:sname", newValue);
      //如果多个值又不想用object，可以多次emit
      this.$emit("update:word", newValue + "1");
      console.log(oldValue);
    },
  },
};
</script>