vue兄弟（同胞）传值步骤_vue同胞传值-优快云博客

本文介绍了如何在 Vue 项目中创建并使用中央事件总线（EventBus）进行组件间的通信。首先在 src 文件夹下创建 eventBus 文件夹及 index.js，实例化一个 Vue 对象作为事件总线。然后在发送数据的组件中引入 EventBus，通过 $emit 触发自定义事件并传递数据。接收数据的组件同样引入 EventBus 并用 $on 监听特定事件，从而接收到并处理传递过来的数据。

1、src文件夹下创建中央事件总线eventBus文件夹及配置index.js文件夹

import Vue from 'vue'
export default new Vue

2、需要传值的zia页面内引入中央事件总线，并且创建触发传值事件

3、在中央事件总线的这个空vue实例之上绑定一个自定义事件$emit

<template>
  <div>
    ziaaaaaaaaaaaaaaaaaaaa
    <br />
    <!-- 在传递方通过事件来触发 -->
    <button @click="fun()">点我传值给zib</button>
  </div>
</template>
<script>
// 引用中央事件总线
import EventBus from "@/eventBus";
export default {
  methods: {
    fun() {
      // 使用中央事件总线来传出数据
      // 在中央事件总线的这个空vue实例之上绑定一个自定义事件
      EventBus.$emit("zia", "我是子a的数据！");
    },
  },
};
</script>
<style>
</style>

4、接收传值的zib页面引入中央事件总线，并且使用$on监听接收数据

<template>
  <div>zibbbbbbbbbbbbbbbbbbbb</div>
</template>

<script>
// 引用中央事件总线
import EventBus from "@/eventBus";
export default {
  mounted() {
    // 使用中央事件总线来监听-接收数据
    // $on("你要监听的事件名",(自定义事件上的数据)=>{
    // })
    EventBus.$on("zia", (val) => {
      console.log(val);
    });
  },
};
</script>
<style>
</style>