Vue 中 this.$emit(“update:xx“,value) 和 :xx.sync 实现同步数据的做法

在 Vue 2.x 中，this.$emit('update:xx', value) 和 xx.sync 都是用来实现父子组件之间的数据同步的方式，它们背后的工作原理有些相似，但语法上有所不同。让我们逐个详细解释这两者的使用方式。

xx.sync（语法糖）

xx.sync 是 Vue 提供的一种语法糖，用来简化子组件和父组件之间数据同步的操作。它的工作原理是自动化地监听 update:xx 事件并更新父组件的数据。

实际上，xx.sync 是 v-bind 和 v-on 的组合，背后也调用了 this.$emit('update:xx', value)。

使用步骤：

1. 父组件 ：使用 xx.sync 来绑定数据。
2. 子组件 ：通过 $emit('update:xx', value) 来更新父组件的数据。

示例：

父组件：

<template>
  <div>
    <child-component :xx.sync="parentData" />
    <p>父组件数据: {{ parentData }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: '初始值'
    };
  }
};
</script>

子组件：

<template>
  <div>
    <button @click="updateParentData">更新父组件数据</button>
  </div>
</template>

<script>
export default {
  props: {
    xx: String
  },
  methods: {
    updateParentData() {
      // 通过 $emit 向父组件发送更新事件
      this.$emit('update:xx', '新数据');
    }
  }
};
</script>

解释

• 父组件 ：使用 :xx.sync="parentData" 自动将 parentData 与子组件的 xx prop 绑定，并且当 xx 更新时，parentData 会自动同步更新。

• 子组件 ：当子组件需要更新数据时，通过 this.$emit('update:xx', '新数据') 向父组件发送 update:xx 事件。

• this.$emit('update:xx', value) 是 Vue 2.x 中标准的父子组件数据同步方式，它通过自定义事件机制来实现数据更新。这种方式需要显式地绑定事件监听，并在子组件中触发更新。

• xx.sync 是 Vue 2.x 提供的语法糖，简化了数据同步的操作。它背后其实是自动化了 $emit('update:xx', value) 过程，适用于较简单的双向绑定场景。