###
Vue3 组件间
传值方法详解
Vue3 提供了多种组件间
传值的方式，这些方式可以满足不同场景下的需求。以下是常见的几种方法及其具体实现：
#### 1. **父组件向子组件
传值 - 使用 `props`**
父组件可以通过 `props` 将数据
传递给子组件。这是最常见的一种单向数据流模式。
##### 示例代码：
```
vue
<!
-- 父组件
-->
<template>
<div>
<child
-comp
onent :message="parentMessage"></child
-comp
onent>
</div>
</template>
<script>
import ChildComp
onent from './ChildComp
onent.
vue';
export default {
comp
onents: { ChildComp
onent },
data() {
return {
parentMessage: '来自父组件的消息',
};
},
};
</script>
```
```
vue
<!
-- 子组件
-->
<template>
<div>{{ message }}</div>
</template>
<script setup>
defineProps({
message: String,
});
</script>
```
这种方法适用于父子组件之间的简单数据
传递[^1]。
---
#### 2. **子组件向父组件
传值 - 使用 `$emit`**
子组件可以通过 `$emit` 向父组件发送事件并附带参数，从而完成数据的反向
传递。
##### 示例代码：
```
vue
<!
-- 子组件
-->
<template>
<butt
on @click="send
DataToParent">点击按钮向父组件
传值</butt
on>
</template>
<script setup>
c
onst emit = defineEmits(['updateValue']);
functi
on send
DataToParent() {
emit('updateValue', '来自子组件的数据');
}
</script>
```
```
vue
<!
-- 父组件
-->
<template>
<div>
<p>接收自子组件的数据：{{ child
Data }}</p>
<child
-comp
onent @updateValue="handleUpdate"></child
-comp
onent>
</div>
</template>
<script>
import ChildComp
onent from './ChildComp
onent.
vue';
export default {
comp
onents: { ChildComp
onent },
data() {
return {
child
Data: '',
};
},
methods: {
handleUpdate(value) {
this.child
Data = value;
},
},
};
</script>
```
这种方式适合处理简单的双向交互逻辑[^4]。
---
#### 3. **兄弟组件之间
传值 - 使用 Provide/Inject 或
Vuex/Pinia**
当两个无直接关系的组件需要共享状态时，可以借助 `provide/inject` 或者全局状态管理工具（如 Pinia/
Vuex）来实现。
##### 示例代码（Provide/Inject 方式）：
```
vue
<!
-- 祖先组件
-->
<script setup>
import { ref, provide } from '
vue';
c
onst sharedState = ref('祖先组件的状态');
provide('sharedKey', sharedState);
</script>
```
```
vue
<!
-- 子孙组件
-->
<script setup>
import { inject } from '
vue';
c
onst sharedState = inject('sharedKey');
</script>
<template>
<div>接收到的状态：{{ sharedState }}</div>
</template>
```
此方法适用于
跨层级组件间的通信[^1]。
---
#### 4. **任意组件间
传值 - 使用 Event Bus 或 Global State Management**
对于更复杂的场景，推荐使用专门的状态管理库（如 Pinia 或
Vuex）。如果只是临时性的消息通知，则可通过创建一个全局事件总线来实现。
##### 示例代码（EventBus 实现）：
```javascript
// event
-bus.js
import { reactive } from '
vue';
export c
onst EventBus = reactive({ messages: [] });
```
```
vue
<!
-- 发送方组件
-->
<script setup>
import { EventBus } from './event
-bus';
EventBus.messages.push('新消息');
</script>
```
```
vue
<!
-- 接收方组件
-->
<script setup>
import { watchEffect } from '
vue';
import { EventBus } from './event
-bus';
watchEffect(() => c
onsole.log(EventBus.messages));
</script>
```
这种方案灵活性高，但需注意避免滥用导致耦合度过大[^2]。
---
#### 总结
以上介绍了四种主要的
Vue3 组件间
传值方法，分别是基于 `props/$emit` 的父子组件通信、利用 `provide/inject`
跨级联通讯以及通过第三方机制（如 Pinia 和 EventBus）达成全项目范围内的资源共享。开发者应根据实际情况选取最适合的技术手段。
扫一扫
2034
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
