兄弟组件间值传递有两种方法:通过 Props:父组件定义 props 属性,子组件接收并使用。通过事件总线:创建全局事件对象,组件通过 $emit 触发事件传递数据,其他组件通过 $on 监听接收数据。

Vue 中兄弟组件之间如何传值
在 Vue 中,兄弟组件之间传递值有两种常见的方法:
1. 通过 Props:
- 父组件将值通过
props属性传递给子组件。 - 子组件通过
props接收并使用父组件传递的值。
步骤:
立即学习“前端免费学习笔记(深入)”;
- 在父组件中,定义一个
props属性,指定要传递的值:
- 在子组件中,在
props选项中声明要接收的属性:
export default {
props: ['message']
}- 在子组件中,使用
this.message访问传递的值。
2. 通过事件总线:
- 创建一个全局事件总线对象,通常作为一个 Vuex store 或 Vue 实例。
- 在组件中,使用
$emit方法触发一个事件,并传递要传递的值。 - 在另一个组件中,使用
$on方法监听事件,并接收传递的值。
步骤:
立即学习“前端免费学习笔记(深入)”;
- 在事件总线对象中,用
$emit方法触发一个事件:
eventBus.$emit('my-event', data);- 在另一个组件中,用
$on方法监听事件:
eventBus.$on('my-event', data => {
// 使用 data
});










