Vue全局事件总线你了解吗


Posted in Vue.js onFebruary 24, 2022

全局事件总线,是组件间的一种通信方式,适用于任何组件间通信。

看下面具体的例子。

父组件:App

<template>
    <div class="app">
        <Company/>
        <Employee/>
    </div>
</template>

<script>
import Company from "./components/Company.vue";
import Employee from "./components/Employee.vue";

export default {
    components:{
        Company,
        Employee
    }
}
</script>

<style>
.app{
    background: gray;
    padding: 5px;
}
.btn{
    margin-left:10px;
    line-height: 30px;
    background: ivory;
    border-radius: 5px;
}
</style>

子组件:Company和Employee

<template>
  <div class="company">
      <h2>公司名称:{{name}}</h2>
      <h2>公司地址:{{address}}</h2>
      <button @click="sendMessage">点我发送</button>
  </div>
</template>

<script>
export default {
    name:"Company",
    data(){
        return {
            name:"五哈技术有限公司",
            address:"上海宝山"
        }
    },
    methods:{
        sendMessage(){
            console.log("Company组件发送数据:",this.name);
            this.$bus.$emit("demo",this.name);
        }
    }

}    
</script>

<style scoped>
.company{
    background: orange;
    background-clip: content-box;
    padding: 10px;
}
</style>
<template>
  <div class="employee">
      <h2>员工姓名:{{name}}</h2>
      <h2>员工年龄:{{age}}</h2>
  </div>
</template>

<script>
export default {
    name:"Employee",
    data(){
        return {
            name:"张三",
            age:25
        }
    },
    mounted(){
        this.$bus.$on("demo",(data) => {
            console.log("Employee组件监听demo,接收数据:",data);
        })
    },
    beforeDestroy() {
        this.$bus.$off("demo");
    }
}

</script>

<style scoped>
.employee{
    background: skyblue;
    background-clip: content-box;
    padding: 10px;
}
</style>

入口文件:main.js

import Vue from 'vue';  
import App from './App.vue';

Vue.config.productionTip = false;

new Vue({
  el:"#app",
  render: h => h(App),
  beforeCreate(){ 
    Vue.prototype.$bus = this;
  }
})

父组件App,子组件CompanyEmployee

子组件Company和Employee之间通过全局数据总线进行数据传递。

在main.js中,定义了全局事件总线:$bus

$bus定义在Vue.prototype,因此$bus对所有组件可见,即所有组件可通过this.$bus访问。

$bus被赋值为this,即vm实例,因此$bus拥有vm实例上的所有属性和方法,如$emit$on$off等。

new Vue({
  beforeCreate(){ 
    Vue.prototype.$bus = this;
  }
})

使用全局事件总线

$bus.$on,监听事件。Employee组件中定义了监听事件,监听demo事件;

$bus.$emit,触发事件。Company组件中定义了触发事件,点击按钮执行sendMessage回调,该回调将触发demo事件。

Vue全局事件总线你了解吗

Vue全局事件总线你了解吗

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注三水点靠木的更多内容!   

Vue.js 相关文章推荐
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
Vue组件生命周期运行原理解析
Nov 25 Vue.js
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
vue实现验证用户名是否可用
Jan 20 Vue.js
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
vue实现轮播图帧率播放
Jan 26 Vue.js
vue2的 router在使用过程中遇到的一些问题
Apr 13 Vue.js
Vue深入理解插槽slot的使用
Aug 05 Vue.js
Vue的生命周期一起来看看
Vue的过滤器你真了解吗
Feb 24 #Vue.js
Vue监视数据的原理详解
Feb 24 #Vue.js
Vue的列表之渲染,排序,过滤详解
Vue3如何理解ref toRef和toRefs的区别
Feb 18 #Vue.js
Vue h函数的使用详解
Feb 18 #Vue.js
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 #Vue.js
You might like
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
Laravel5中contracts详解
2015/03/02 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
2017/02/20 PHP
thinkphp整合系列之极验滑动验证码geetest功能
2019/06/18 PHP
YII2框架中actions的作用与使用方法示例
2020/03/13 PHP
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
xss文件页面内容读取(解决)
2010/11/28 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
Angular用来控制元素的展示与否的原生指令介绍
2015/01/07 Javascript
JS及PHP代码编写八大排序算法
2016/07/12 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
2016/08/25 Javascript
Vue键盘事件用法总结
2017/04/18 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
JS实现弹出下载对话框及常见文件类型的下载
2017/07/13 Javascript
JavaScript实现旋转轮播图
2020/08/18 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
2018/02/11 Javascript
JavaScript模板引擎应用场景及实现原理详解
2018/12/14 Javascript
基于Three.js实现360度全景图片
2018/12/30 Javascript
JS中min函数实例讲解
2019/02/18 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
[04:00]DOTA2解说界神雕侠侣 CJ第四天谷子现场过生日
2013/07/30 DOTA
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
在NumPy中创建空数组/矩阵的方法
2018/06/15 Python
Python绘图Matplotlib之坐标轴及刻度总结
2019/06/28 Python
django 单表操作实例详解
2019/07/30 Python
Django实现跨域的2种方法
2019/07/31 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
python实现把两个二维array叠加成三维array示例
2019/11/29 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
Html5与App的通讯方式详解
2019/10/24 HTML / CSS
美国花布包包品牌:Vera Bradley
2017/08/11 全球购物
关于爱情的广播稿
2014/01/16 职场文书
二手车交易协议书标准版
2014/11/16 职场文书
Redis高可用集群redis-cluster详解
2022/03/20 Redis