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中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
浅析VUE防抖与节流
Nov 24 Vue.js
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
vue 通过base64实现图片下载功能
Dec 19 Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
Vuex实现简单购物车
Jan 10 Vue.js
Vue实现多页签组件
Jan 14 Vue.js
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
vue实现省市区联动 element-china-area-data插件
Apr 22 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
php牛逼的面试题分享
2013/01/18 PHP
php超快高效率统计大文件行数
2015/07/05 PHP
两种php实现图片上传的方法
2016/01/22 PHP
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
2011/03/28 Javascript
javascript:void(0)的问题使用探讨
2014/04/10 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
2014/08/04 Javascript
jQuery中prevUntil()方法用法实例
2015/01/08 Javascript
Webpack 实现 Node.js 代码热替换
2015/10/22 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
2016/10/24 Javascript
基于jQuery实现定位导航位置效果
2017/11/15 jQuery
原生JS写Ajax的请求函数功能
2017/12/22 Javascript
使用JS模拟锚点跳转的实例
2018/02/01 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
angular学习之动态创建表单的方法
2018/12/07 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
利用不到200行代码写一款属于你自己的js类库
2019/07/08 Javascript
webpack+vue.js构建前端工程化的详细教程
2020/05/10 Javascript
[03:42]2016国际邀请赛中国区预选赛首日现场玩家采访
2016/06/26 DOTA
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
python遍历目录的方法小结
2016/04/28 Python
对python中的高效迭代器函数详解
2018/10/18 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
对Python中的条件判断、循环以及循环的终止方法详解
2019/02/08 Python
python实现视频分帧效果
2019/05/31 Python
详解Pandas之容易让人混淆的行选择和列选择
2019/07/10 Python
Django数据库操作之save与update的使用
2020/04/01 Python
如何在sublime编辑器中安装python
2020/05/20 Python
露营世界:Camping World
2017/02/02 全球购物
深深扎根运动世界的生活品牌:Tillys
2017/10/30 全球购物
国外软件测试工程师面试题
2016/12/09 面试题
业务副厂长岗位职责
2014/01/03 职场文书
租车协议书范本2014
2014/11/17 职场文书
2016年区委书记抓基层党建工作公开承诺书
2016/03/25 职场文书
win10安装配置nginx的过程
2021/03/31 Servers