vue3传递对象给子组件,子组件如何取值使用

Vue3 使用 props 来在父组件与子组件之间传递数据。如果你希望将对象从父组件传至子组件，首先需要在父组件上定义这个对象，并将其作为 prop 传递到子组件。

### 正确做法：

#### 父组件中：

<template>
  <div>
    <!-- 将对象通过 prop 传递给子组件 -->
    <ChildComponent :data="objectToPass" />
  </div>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';
import { objectToPass } from './parentData.js'; // 假设这是你的对象

// 这里可以定义你的对象
const objectToPass = {
  key1: 'value1',
  key2: 'value2',
};

// 根据需求你可以在这里导出对象或其他东西
export default {
  name: "ParentComponent",
};
</script>

#### 子组件中：

<template>
  <div>
    <!-- 在子组件中接收并显示传递过来的对象 -->
    {{ data.key1 }} 和 {{ data.key2 }}
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

// 使用 defineProps 接收来自父组件的数据
defineProps({
  data: Object,
});

// 在这里你可以直接访问 props 中传递来的对象属性
console.log(data);
</script>

### 关键点说明：
1. **定义 Prop**：在子组件的 `setup` 函数中使用 `defineProps` 来定义接受的 props 类型和名称。这会自动将父组件传递的值绑定到相应的响应式属性上。
2. **响应式处理**：由于 prop 数据在 Vue 的渲染过程中已经被转换成响应式数据，所以可以直接在其模板中使用 `{{ }}` 来访问和展示。
3. **灵活性与安全性**：使用这种方式传递数据既灵活又安全，因为你可以指定 prop 的类型和默认值，减少错误可能性。

###