vue2 .sync

<template>
  <child-component :message.sync="parentMessage"></child-component>
</template>

<script>
export default {
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  },
  components: {
    ChildComponent
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <input v-model="localMessage" @input="updateMessage">
  </div>
</template>

<script>
export default {
  props: ['message'],
  data() {
    return {
      localMessage: this.message
    };
  },
  methods: {
    updateMessage() {
      this.$emit('update:message', this.localMessage);
    }
  }
};
</script>

解释说明

在 Vue 2 中，.sync 修饰符用于简化父子组件之间的双向绑定。当父组件传递一个 prop 给子组件时，子组件可以通过 $emit 触发一个更新事件来修改父组件的数据。

1. 父组件:

   • :message.sync="parentMessage"：将 parentMessage 传递给子组件，并使用 .sync 修饰符。
   • 当子组件触发 update:message 事件时，父组件会自动更新 parentMessage 的值。

2. 子组件:

   • 接收 message 作为 prop。
   • 使用 v-model 绑定到 localMessage。
   • 当 localMessage 发生变化时，通过 updateMessage 方法触发 update:message 事件，传递新的值给父组件。

这样就实现了父子组件之间的双向数据绑定。