如何在 Vue3 中有效地通过父子组件间传递一个对象数据？

在Vue3中，父子组件之间有效地传递对象数据通常有以下几种方法：

1. props（属性）：这是最常用的方式，父组件可以将对象作为props传给子组件。创建一个名为`myObject`的对象并将其设置为`props`的默认值，然后在子组件中接收它。

// 父组件
<template>
  <child-component :myObject="myData" />
</template>

<script setup>
import { ref } from 'vue'
const myData = ref({ key: 'value' }) // 示例对象
</script>

// 子组件
<template>
  <div>{{ myObject.key }}</div>
</template>

<script>
export default {
  props: {
    myObject: Object,
    // 默认值可以在父组件中设置
    default: { type: Object, value: {} }
  }
}
</script>

2. 自动响应式（ref和reactive）：如果需要双向绑定，可以使用`ref`包装对象并在子组件内部修改。

// 父组件
<template>
  <child-component :data="parentObject" />
</template>

<script setup>
import { reactive, ref } from 'vue'
const parentObject = reactive({ key: 'value' })
</script>

// 子组件
<template>
  <input v-model="data.key">
</template>

<script>
export default {
  props: {
    data: ref(Object)
  },
  setup(props) {
    const localData = ref(props.data);
    // 更新父组件的数据
    onMounted(() => {
      watch(localData, (newVal) => {
        props.$emit('update:data', newVal);
      });
    });
  }
}
</script>

3. 使用事件bus（Event Bus）：当父子组件间的通信变得复杂时，可以考虑使用全局的事件总线。

// 父组件
<template>
  <child-component @updateObject="handleUpdateObject" />
</template>

<script>
import bus from '@/utils/bus.js';
...
methods: {
  handleUpdateObject(obj) {
    this.myData = obj;
  }
}
</script>

// 子组件
<template>
  <button @click="updateParent">更新对象</button>
</template>

<script>
export default {
  methods: {
    updateParent() {
      bus.$emit('updateObject', this.myData);
    }
  }
}
</script>