Vue3 组件之间传值及适用场景分析
作者：yuren_xia
这篇文章主要介绍了Vue3组件之间传值及适用场景分析,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
在 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 | 多组件共享状态（推荐中大型项目） |
推荐实践：
- 优先使用
props和emit实现父子通信。 - 简单双向绑定用
v-model，复杂逻辑用事件。 - 跨层级或全局状态使用 Pinia。
- 避免过度依赖
provide/inject，可能导致组件耦合。
到此这篇关于Vue3 组件之间传值的文章就介绍到这了,更多相关Vue3 组件之间传值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！