vue父子组件数据同步

在Vue中，父子组件之间的数据同步可以通过props和emit来实现。下面是一个简单的例子：

父组件：

<template>
  <div>
    <h3>父组件</h3>
    <p>{{ message }}</p>
    <ChildComponent :message="message" @updateMessage="updateMessage" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage;
    }
  }
};
</script>

子组件：

<template>
  <div>
    <h4>子组件</h4>
    <input v-model="localMessage" />
    <button @click="updateParentMessage">更新父组件数据</button>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      localMessage: this.message
    };
  },
  methods: {
    updateParentMessage() {
      this.$emit('updateMessage', this.localMessage);
    }
  }
};
</script>

在这个例子中，父组件通过props将message传递给子组件，子组件使用v-model绑定一个本地的localMessage变量来接收父组件传递的数据。当用户在子组件中输入的时候，通过点击按钮触发updateParentMessage方法来更新父组件的数据，子组件通过$emit来触发updateMessage事件，并传递更新后的数据给父组件。

这样就实现了父子组件之间的数据同步。当子组件更新数据时，父组件的message也会相应地更新。