.sync修饰符

有时候，我们需要对组件进行双向绑定。这么做的目的时避免父组件和子组件分别改变同一个prop值而产生冲突。具体思路是，只允许子组件向父组件发出修改组件值得意图，而实际修改组件值得动作由父组件“监听-响应“动作来完成。

这个过程利用了 EventBus 来完成父子组件之间得通信。

而.sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

一个案例

具体见一下例子：

App.vue：

<template>
  <div class="app">
    <!-- 父组件可以监听那个事件并根据需要更新一个本地的数据 property -->
    <div>爸爸计划代儿子去{{ travelPlan }}</div>
    <hr />
    <child-idea :sendData.sync="travelPlan"></child-idea>

    <button @click="fatherIdea">爸爸要去</button>
  </div>
</template>

<script>
import childIdea from "./Child.vue";
export default {
  name: "index",
  components: { childIdea },
  data() {
    return {
      travelPlan: "爬山",
    };
  },
  methods: {
    fatherIdea() {
      this.travelPlan = "爬山";
    },
  },
};
</script>

Child.vue：

<template>
  <div class="child-idea">
    <div>儿子知道爸爸要带他去:{{ sendData }}</div>
    <br /><button @click="childSelect">儿子要去</button>
  </div>
</template>
<script>
export default {
  name: "childIdea",
  props: ["sendData"], // 用来接收父组件传给子组件的数据
  data() {
    return {
      travelSite: `迪斯尼`,
    };
  },
  methods: {
    childSelect() {
      // 表达子组件要修改父组件值的意图
      this.$emit("update:sendData", this.travelSite); 
    },
  },
};
</script>

其中，

<child-idea :sendData.sync="travelPlan"></child-idea>

展开写就是

<child-idea
    :sendData="travelPlan"
    @update:sendData="travelPlan = $event"
></child-idea>

Vue中的EventBus

Vue封装了 EventBus：

• 使用 $emit 定义并触发事件，并传参；事件名应为：update:被监听的数据名
• 使用 $event 来获取其他组件中 $emit 的参数

因此父组件可以监听事件"update:sendData"并根据需要更新本地的数据 property。

点击这里看结果

vue 修饰符sync的功能是：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。这样就避免了父组件和子组件分别改变同一个prop值而产生冲突。