vue兄弟组件之间通信（EventBus 事件总线）

最新推荐文章于 2024-07-23 16:37:55 发布

Leeeeeer

最新推荐文章于 2024-07-23 16:37:55 发布

阅读量2.1k

点赞数 1

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_38110572/article/details/120022297

版权

本文介绍了在Vue中，非父子组件如何通过创建一个空的Vue实例作为事件总线来实现通信。在A组件中触发事件，然后在B组件的mounted钩子中监听并接收数据，实现了组件间的通信。这种方法适用于简单场景，提供了组件间解耦的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时候，非父子关系的两个组件之间也需要通信。在简单的场景下，可以使用一个空的 Vue 实例作为事件总线：

通信方法

let bus = new Vue()
//触发A组件中的事件
bus.$emit('event',123)
//在组件B创建的钩子监听事件
bus.$on('event',function(n){
	console.log(n)
})

代码演示

使用一个空的 Vue 实例作为事件总线

  // main.js  也可以在其它地方创建比如自己的utils里
  export var bus = new Vue()
  //

A组件

<template>
  <div>
    <span>我是A组件的数据->{{a}}</span>
    <input type="button" value="把A数据传给C" @click = "send">
  </div>
</template>

<script>
  // 引入空的实例
  import { bus } from '@/main.js'
  export default {
    data () {
      return {
        a: "我是a组件中数据"
      }
    },
    methods: {
     send () {
       bus.$emit("event", this.a)
     }
    }
  }
</script>

<style>
</style>

B组件

<template>
  <div>
    <div>
        <h3>我是B组件</h3>
        <span>接收过来A的数据为: {{a}}</span>
        <br>
    </div>
  </div>
</template>

<script>
  // 引入空的实例
  import { bus } from '@/main.js'
  export default {
    data () {
      return {
        a: ""
      }
    },
    mounted () {
      // 监听事件
      bus.$on("event", (a) => this.a = a)
    }
  }
</script>