Vue 3 父子组件传参方式总览

🌟 Vue 3 父子组件传参方式总览

1️⃣ Props：父传子

作用

• 父组件通过 props 向子组件传递数据。

• 子组件接收后默认 只读，不能直接修改。

• 支持 静态值、动态值、对象/数组、类型校验、默认值。

子组件写法

// 数组形式
const props = defineProps(['name', 'age']);

// 对象形式（可指定类型和默认值）
const props = defineProps({
  name: { type: String, default: '张三' },
  age: { type: Number, required: true },
  config: { type: Object, default: () => ({}) }
});

父组件传入

<!-- 静态值 -->
<MyChild name="李四" age="20" />

<!-- 动态值 -->
<MyChild :name="userName" :age="userAge" />

<!-- 对象/数组 -->
<MyChild :config="{ theme: 'dark' }" />

特点

• 单向绑定（父 → 子）

• 子组件只能读取，若需要修改必须通过事件或 v-model。

---

2️⃣ Emit：子传父

作用

• 子组件通过 emit 向父组件发送事件和数据。

• 实现 子组件触发动作通知父组件。

子组件写法

const emit = defineEmits(['updateName', 'submitData']);

触发事件

 

emit('updateName', '新名字'); // 父组件监听 updateName
emit('submitData', { foo: 123 }); // 传递对象

父组件监听

<MyChild @updateName="name = $event" @submitData="handleSubmit" />

特点

• 实现 子 → 父 的数据流

• 用于子组件通知父组件或传回修改后的数据

• 配合 v-model 可实现双向绑定

---

3️⃣ v-model：双向绑定

作用

• Vue 3 支持自定义 prop 名的 v-model。

• 自动实现 子组件修改值 → 父组件更新。

子组件写法

const props = defineProps(['modelValue']); // 默认 v-model prop
const emit = defineEmits(['update:modelValue']); // 默认事件

• 如果自定义 prop 名：

const props = defineProps(['gatewayDatabtnItem']);
const emit = defineEmits(['update:gatewayDatabtnItem']);

子组件修改值

emit('update:gatewayDatabtnItem', newValue);

父组件使用

 

<!-- 默认 v-model -->
<MyChild v-model="value" />

<!-- 自定义 prop -->
<MyChild v-model:gatewayDatabtnItem="btnItem" />

 

特点

• 双向绑定，自动更新父组件数据

• 方便表单和动态交互

---

4️⃣ 插槽（Slots）：父传子模板/内容

作用

• 父组件向子组件传递 DOM 或模板内容。

• 可以结合 作用域插槽，让子组件传数据给父组件。

子组件写法

 

<slot name="header"></slot>
<slot :item="item">{{ item.name }}</slot> <!-- 作用域插槽 -->

父组件传入

<MyChild>
  <template #header>
    <h1>标题</h1>
  </template>

  <template #default="{ item }">
    <p>{{ item.name }}</p>
  </template>
</MyChild>

• 实现 父组件传入模板内容

• 配合作用域插槽可实现 子 → 父 的数据传递

---

5️⃣ provide / inject：跨层级传参

作用

• 用于 祖先组件 → 任意子孙组件 传递数据

• 常用于全局状态、组件库共享数据

父组件写法

 

import { provide } from 'vue';
provide('theme', 'dark');

子组件写法

import { inject } from 'vue';
const theme = inject('theme', 'light'); // 第二个参数为默认值

特点

• 不用一层层传递 props

• 数据不具备响应式，需用 reactive 或 ref 包裹

---

6️⃣ 总结数据流方向

方式	数据流	特点	示例
props	父 → 子	只读，支持类型和默认值	<Child :name="userName"/>
emit	子 → 父	子组件触发父事件	emit('updateName', newName)
v-model	双向	子组件修改父组件数据	<Child v-model="value"/>
slots	父 → 子模板	父传 DOM/模板	<Child><template #default>...</template></Child>
provide/inject	祖先 → 任意子孙	跨层级，常用于状态共享	provide('theme', 'dark')

---