vue3 .sync

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

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

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

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  },
  methods: {
    updateMessage() {
      this.$emit('update:message', 'Updated message from child');
    }
  }
};
</script>

解释说明

1. 父组件：

   • 在父组件中，使用 .sync 修饰符将 parentMessage 绑定到子组件的 message 属性。
   • 这样做的效果是，当子组件通过 $emit('update:message', newValue) 发出更新事件时，父组件中的 parentMessage 会自动更新。

2. 子组件：

   • 子组件接收 message 作为 prop。
   • 当点击按钮时，调用 updateMessage 方法，该方法会触发 update:message 事件，并传递新的值给父组件。
   • 父组件监听到这个事件后，会自动更新 parentMessage 的值。

这种方式简化了父子组件之间的双向数据绑定。