[Vue3]父子组件相互传值数据同步

<template>
  <div>
    <ChildComponent :parentData="parentData" @updateData="updateParentData" />
    <p>父组件数据: {{ parentData }}</p>
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
 
const parentData = ref('父组件数据');
 
// 更新父组件数据的方法
function updateParentData(newData) {
  parentData.value = newData;
}
</script>

父组件：

<template>
  <div>
    <button @click="updateData(childData)">更新数据到父组件</button>
    <p>子组件数据: {{ childData }}</p>
  </div>
</template>
 
<script setup>
import { defineProps, defineEmits } from 'vue';
 
const props = defineProps(['parentData']);
const emit = defineEmits(['updateData']);
 
const childData = ref(props.parentData);
 
function updateData(newData) {
  childData.value = newData;
  emit('updateData', newData);
}
</script>

子组件通过自定义事件updateData向父组件传递数据，父组件监听该事件并更新本地数据。这样，无论是父组件向子组件传递数据，还是子组件向父组件传递数据，它们之间的数据都是同步的。