vue中兄弟组件之间怎么传值

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

Vue 中兄弟组件之间如何传值

在 Vue 中，兄弟组件之间传递值有两种常见的方法：

1. 通过 Props：

• 父组件将值通过 props 属性传递给子组件。
• 子组件通过 props 接收并使用父组件传递的值。

步骤：

• 在父组件中，定义一个 props 属性，指定要传递的值：

<template><child-component :message="myMessage"></child-component></template>

登录后复制

• 在子组件中，在 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
});

登录后复制

以上就是vue中兄弟组件之间怎么传值的详细内容，更多请关注叮当号网其它相关文章！