25-非父子通信 - event bus 事件总线

作用:非父子组件之间,进行简易消息传递。(复杂场景 -> Vuex)

1.创建一个都能访问到的事件总线(空 Vue 实例) -> utils/EventBus.js

javascript 复制代码
import Vue from 'vue'
const Bus = new Vue()
export default Bus

2. A组件(接收方),监听 Bus实例 的事件(支持多个组件同时监听)

javascript 复制代码
created () {
    Bus.$on('sendMsg',(msg) => {
        this.msg = msg
    })
}

3. B组件(发送方),触发 Bus实例 的事件

javascript 复制代码
Bus.$emit('sendMsg', '这是一个消息')

代码示例:

(1). src / utils / EventBus.js 创建事件总线

javascript 复制代码
// 1.创建一个都能访问到的事件总线 (空的 Vue 实例)
import Vue from 'vue'

const Bus = new Vue()

export default Bus

(2). 创建发送者和接受者组件

(3). App.vue 引入渲染

html 复制代码
<template>
  <div id="app">
    <BaseA></BaseA>
    <BaseB></BaseB>
  </div>
</template>

<script>

import BaseA from './components/BaseA.vue'
import BaseB from './components/BaseB.vue'


export default {

  components: {
   BaseA,
   BaseB
    
  }

}

</script>
<style></style>
相关推荐
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜3 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD3 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding3 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空3 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui
01传说4 小时前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js
sunbyte6 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
拾光拾趣录7 小时前
虚拟DOM
前端·vue.js·dom
合作小小程序员小小店7 小时前
web网页,在线%食谱推荐系统%分析系统demo,基于vscode,uniapp,vue,java,jdk,springboot,mysql数据库
vue.js·spring boot·vscode·spring·uni-app