vue .sync

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

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

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

解释说明

1. 父组件:

   • :message.sync="parentMessage" 使用了 .sync 修饰符，它是一个语法糖，等价于同时使用 v-bind 和 v-on。
   • 这意味着当子组件触发 update:message 事件时，父组件的 parentMessage 数据会自动更新。

2. 子组件:

   • 子组件通过 $emit('update:message', newMessage) 触发一个自定义事件，通知父组件更新 message 属性的值。
   • 父组件接收到这个事件后，会自动更新绑定的数据属性 parentMessage。