当前位置：首页 > news >正文

Vue3 组件之间传值

news 来源：原创 2025/5/23 8:06:03

在 Vue3 中，组件之间的数据传递主要有以下几种方式，适用于不同的场景：

一、父组件向子组件传值：`props`

1. 子组件定义 `props`

<!-- ChildComponent.vue -->
<script setup>
// 组合式 API（推荐）
const props = defineProps({title: {type: String,default: '默认标题'},count: {type: Number,required: true}
});
</script><template><div>{{ title }} - {{ count }}</div>
</template>

<!-- 选项式 API -->
<script>
export default {props: {title: String,count: {type: Number,required: true}}
}
</script>

2. 父组件传递数据

<template><ChildComponent :title="'Hello Vue3'" :count="42"/>
</template>

二、子组件向父组件传值：`emit` 事件

1. 子组件触发事件

<!-- ChildComponent.vue -->
<script setup>
const emit = defineEmits(['updateCount']); // 定义事件function increment() {emit('updateCount', 10); // 触发事件并传递数据
}
</script><template><button @click="increment">增加计数</button>
</template>

2. 父组件监听事件

<template><ChildComponent :count="count"@updateCount="count = $event" <!-- 接收子组件传递的值 -->/>
</template><script setup>
import { ref } from 'vue';
const count = ref(0);
</script>

三、双向绑定：`v-model`

1. 子组件支持 `v-model`

<!-- ChildComponent.vue -->
<script setup>
const props = defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);function updateValue(newValue) {emit('update:modelValue', newValue);
}
</script><template><input :value="modelValue" @input="updateValue($event.target.value)">
</template>

2. 父组件使用 `v-model`

<template><ChildComponent v-model="text" /> <!-- 自动同步数据 -->
</template><script setup>
import { ref } from 'vue';
const text = ref('初始值');
</script>

四、跨层级传值：`provide` / `inject`

1. 祖先组件提供数据

<!-- AncestorComponent.vue -->
<script setup>
import { provide, ref } from 'vue';const theme = ref('dark');
provide('theme', theme); // 提供数据
</script>

2. 后代组件注入数据

<!-- ChildComponent.vue -->
<script setup>
import { inject } from 'vue';const theme = inject('theme'); // 注入数据
</script><template><div :class="theme">当前主题：{{ theme }}</div>
</template>

五、通过 Context 共享数据（如 Pinia 状态管理）

1. 安装 Pinia

npm install pinia

2. 创建 Store

// stores/counter.js
import { defineStore } from 'pinia';export const useCounterStore = defineStore('counter', {state: () => ({count: 0}),actions: {increment() {this.count++;}}
});

3. 组件中使用 Store

<template><div>Count: {{ counterStore.count }}</div><button @click="counterStore.increment()">+1</button>
</template><script setup>
import { useCounterStore } from '@/stores/counter';const counterStore = useCounterStore();
</script>

总结：不同场景的传值方式

场景	方法	适用性
父子组件直接通信	`props` + `emit`	父子层级明确，数据流单向
表单输入双向绑定	`v-model`	表单类组件（如输入框、下拉框）
跨层级组件通信	`provide` / `inject`	深层次嵌套组件（如全局配置、主题）
复杂应用状态共享	Pinia / Vuex	多组件共享状态（推荐中大型项目）