###
Vue2
组件间
传值方法
在
Vue2 中，
组件间的
传值可以通过多种方式进行
实现。以下是几种常见的方式及其具体
实现。
#### 1. **父子
组件之间的
传值**
- 子
组件向父
组件传递数据通常通过 `this.$emit`
实现[^2]。
- 父
组件向子
组件传递数据则通过 `props` 属性完成。
```
vue
<!-- ParentComponent.
vue -->
<template>
<div>
<ChildComponent :message="parentMessage" @childEvent="handleChildEvent"></ChildComponent>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.
vue';
export default {
components: { ChildComponent },
data
() {
return {
parentMessage: 'Hello from Parent'
};
},
methods: {
handleChildEvent
(dataFromChild
) {
console.log
('Data received from child:', dataFromChild
);
}
}
};
</script>
```
```
vue
<!-- ChildComponent.
vue -->
<template>
<button @click="sendToParent">Send to Parent</button>
</template>
<script>
export default {
props: ['message'],
methods: {
sendToParent
() {
this.$emit
('childEvent', 'Hello from Child'
);
}
}
};
</script>
```
---
#### 2. **兄弟
组件之间的
传值**
兄弟
组件之间无法直接通信，因此需要借助父
组件作为中介来
实现数据的
传递。
##### 流程描述：
- 首先，第一个子
组件通过 `$emit` 将事件触发并携带数据发送到父
组件。
- 接着，父
组件监听该事件并将接收到的数据重新分配给第二个子
组件。
```
vue
<!-- ParentComponent.
vue -->
<template>
<div>
<BrotherA @data-from-a="updateSiblingB"></BrotherA>
<BrotherB :siblingaData="siblingAData"></BrotherB>
</div>
</template>
<script>
import BrotherA from './BrotherA.
vue';
import BrotherB from './BrotherB.
vue';
export default {
components: { BrotherA, BrotherB },
data
() {
return {
siblingAData: null
};
},
methods: {
updateSiblingB
(data
) {
this.siblingAData = data;
}
}
};
</script>
```
```
vue
<!-- BrotherA.
vue -->
<template>
<button @click="sendData">Send Data to Sibling B</button>
</template>
<script>
export default {
methods: {
sendData
() {
const message = 'Hello from A';
this.$emit
('data-from-a', message
);
}
}
};
</script>
```
```
vue
<!-- BrotherB.
vue -->
<template>
<p>Data Received from A: {{ siblingaData }}</p>
</template>
<script>
export default {
props: ['siblingaData']
};
</script>
```
---
#### 3. **跨级
组件之间的
传值 (祖孙关系
)**
对于
更复杂的场景，比如祖父
组件与孙子
组件之间的通信，可以采用以下两种方式：
-
使用 `$refs` 或者 `$children` 来手动访问嵌套层次中的实例对象。
-
更推荐的是引入全局状态管理工具
Vuex，或者
使用事件总线 Event
Bus 进行解耦处理。
##### 示例：基于 Event
Bus 的跨级
组件通信
创建一个独立的事件中心文件用于订阅和发布消息。
```javascript
// event
Bus.js
import
Vue from '
vue';
export const Event
Bus = new
Vue();
```
```
vue
<!-- GrandfatherComponent.
vue -->
<template>
<GrandsonComponent></GrandsonComponent>
</template>
<script>
import { Event
Bus } from './event
Bus.js';
export default {
mounted
() {
setTimeout
(() => {
Event
Bus.$emit
('grandpa-message', 'Hello from Grandpa!'
);
}, 1000
);
}
};
</script>
```
```
vue
<!-- GrandsonComponent.
vue -->
<template>
<p>Message from grandpa: {{ grandpaMessage }}</p>
</template>
<script>
import { Event
Bus } from './event
Bus.js';
export default {
data
() {
return {
grandpaMessage: ''
};
},
created
() {
Event
Bus.$on
('grandpa-message',
(msg
) => {
this.grandpaMessage = msg;
}
);
}
};
</script>
```
---
### 总结
以上介绍了
Vue2 中
不同类型的
组件间
传值的具体方法以及其
实现细节。无论是简单的父子
组件还是复杂的关系链路，都可以找到合适的解决方案以满足实际开发需求。
扫一扫
233
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
