###
Vue3 中自定义
组件间
传值的
方法
在
Vue3 中，父子
组件间的
传值主要依赖于 `props` 和 `$emit`
方法；而兄弟
组件或跨级
组件之间的通信则通常通过事件总线、Provide/Inject 或
Vuex 等状态管理工具来实现。以下是详细的介绍和示例。
#### 1
. **父
组件向子
组件传值**
父
组件可以通过 `props` 将数据
传递给子
组件。子
组件接收这些数据并通过模板渲染出来。
```html
<!-- 父
组件 -->
<template>
<div>
<ChildComponent :message="parentMessage" />
</div>
</template>
<script>
import ChildComponent from '
./ChildComponent
.vue';
export default {
components: { ChildComponent },
data() {
return {
parentMessage: 'Hello from parent component'
};
}
};
</script>
```
子
组件需要声明接受的 `props`：
```html
<!-- 子
组件 -->
<template>
<div>接收到的消息: {{ message }}</div>
</template>
<script setup>
defineProps(['message']);
</script>
```
这种
方法适用于简单的父子
组件通信[^3]。
---
#### 2
. **子
组件向父
组件传值**
子
组件可以通过 `$emit` 向父
组件发送事件，并携带参数。父
组件监听该事件即可获取子
组件的数据。
```html
<!-- 子
组件 -->
<template>
<button @click="sendDataToParent">点击我向父
组件发消息</button>
</template>
<script setup>
const emit = defineEmits(['childEvent']);
function sendDataToParent() {
emit('childEvent', '这是来自子
组件的消息');
}
</script>
```
父
组件监听子
组件发出的事件：
```html
<!-- 父
组件 -->
<template>
<div>
<ChildComponent @childEvent="handleChildEvent" />
<p>从子
组件接收到的消息: {{ childMessage }}</p>
</div>
</template>
<script>
import ChildComponent from '
./ChildComponent
.vue';
export default {
components: { ChildComponent },
data() {
return {
childMessage: ''
};
},
methods: {
handleChildEvent(message) {
this
.childMessage = message;
}
}
};
</script>
```
这种方式适合处理单向数据流中的回调需求[^2]。
---
#### 3
. **双向绑定（v-model 增强）**
Vue3 支持更灵活的 `v-model`
组件绑定方式，允许指定多个模型字段。
```html
<!-- 父
组件 -->
<template>
<Child v-model:username="user
.name" v-model:age="user
.age" />
</template>
<script>
import Child from '
./Child
.vue';
export default {
components: { Child },
data() {
return {
user: {
name: 'John Doe',
age: 25
}
};
}
};
</script>
```
子
组件需定义对应的 `props` 和 `emits`：
```html
<!-- 子
组件 -->
<template>
<div>
用户名：<input type="text" :value="username" @input="updateUsername($event)" /><br/>
年龄：<input type="number" :value="age" @input="updateAge($event)" />
</div>
</template>
<script setup>
const props = defineProps(['username', 'age']);
const emit = defineEmits(['update:username', 'update:age']);
function updateUsername(event) {
emit('update:username', event
.target
.value);
}
function updateAge(event) {
emit('update:age', Number(event
.target
.value));
}
</script>
```
这种模式特别适合表单类交互场景[^4]。
---
#### 4
. **跨级
组件通信（Provide/Inject）**
当涉及祖孙关系或多层嵌套时，可以使用 `provide/inject` 提供一种轻量级的状态共享方案。
##### Provide 方式：
```
javascript
// 祖先
组件
<script setup>
import { provide, ref } from '
vue';
const sharedState = ref('祖先
组件提供的数据');
provide('sharedKey', sharedState);
</script>
```
##### Inject 方式：
```
javascript
// 孙子
组件
<script setup>
import { inject } from '
vue';
const sharedState = inject('sharedKey'); // 获取祖先
组件提供的数据
</script>
```
此
方法不破坏
组件封装性的同时实现了深层次通信[^4]。
---
#### 5
. **兄弟
组件通信（事件总线或其他工具）**
如果两个无直接关联的
组件需要相互通信，推荐使用第三方库如 Pinia/
Vuex 或者手动创建一个事件中心。
简单例子如下：
```
javascript
// 创建事件总线
const bus = new
Vue();
// 发送事件
bus
.$emit('eventName', payload);
// 接收事件
bus
.$on('eventName', callbackFunction);
```
现代开发建议优先采用集中化状态管理模式替代
传统事件总线[^4]。
---
### 总结
以上介绍了几种常见的
Vue3 自定义
组件间
传值的方式及其适用范围，开发者应根据具体业务需求选取最合适的策略。
扫一扫
188
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
