vue的.sync修饰符用法及原理详解

.sync 作用
当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。

.sync 原理
利用EventBus，子组件触发事件，父组件响应事件并实现数据的更新，避免由子组件直接修改父组件传过来的内容。（如果子组件直接操作，vue会有警告提示）。

v-on:update:word="wrd = $event" 则被简写为 :show.word

//父组件

<template>
  <div class="hello">
    父级的内容<input type="text" v-model="wrd">
    <br /><br />
    <box :word.sync="wrd"></box>
  </div>
</template>
<script>
import box from "./components/child"; //引入box子组件
export default {
  name: "HelloWorld",
  data() {
    return {
      wrd: ""
    };
  },
  components: {
    box
  }
};

//子组件

<template>
  <div class="hello">
    <div class="ipt">
     子级的内容 <input type="text" v-model="str">
    </div>
    <h2>{{ word }}</h2>
  </div>
</template>
<script>
export default {
  name: "box",
  data() {
    return {
      str: ""
    };
  },
  props:['word'],
  watch: {
    str: function(newValue, oldValue) {
      //每当str的值改变则发送事件update:word , 并且把值传过去
      this.$emit("update:word", newValue);
    }
  }
};