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单元格多列合并的实现
Nov 26 Vue.js
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
vue3.0实现插件封装
Dec 14 Vue.js
浅析vue中的nextTick
Dec 28 Vue.js
vuex的使用步骤
Jan 06 Vue.js
vue实现简易计算器功能
Jan 20 Vue.js
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
vue实现轮播图帧率播放
Jan 26 Vue.js
vue首次渲染全过程
Apr 21 Vue.js
vue实现锚点定位功能
Jun 29 Vue.js
Vue自定义铃声提示音组件的实现
Jan 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
ThinkPHP基于PHPExcel导入Excel文件的方法
2014/10/15 PHP
php批量删除超链接的实现方法
2015/10/19 PHP
Thinkphp实现站点静态化的方法详解
2017/03/21 PHP
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
2013/05/19 Javascript
JS匀速运动演示示例代码
2013/11/26 Javascript
JavaScript表单通过正则表达式验证电话号码
2014/03/14 Javascript
Js实现网页键盘控制翻页的方法
2014/10/30 Javascript
jQuery实现简洁的导航菜单效果
2015/11/23 Javascript
JS判断元素是否在数组内的实现代码
2016/03/30 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
2016/06/30 Javascript
vue2.0 自定义日期时间过滤器
2017/06/07 Javascript
EasyUI创建人员树的实例代码
2017/09/15 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
Python使用Scrapy爬取妹子图
2015/05/28 Python
使用python绘制常用的图表
2016/08/27 Python
python if not in 多条件判断代码
2016/09/21 Python
PyQT实现多窗口切换
2018/04/20 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
详解Django 时间与时区设置问题
2019/07/23 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
猫途鹰英国网站:TripAdvisor英国(旅游社区和旅游评论)
2016/08/30 全球购物
Ivory Isle Designs美国/加拿大:婚礼和活动文具公司
2018/08/21 全球购物
Reformation官网:美国女装品牌
2018/09/14 全球购物
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
汽车检测与维修个人求职信
2013/09/24 职场文书
企业军训感言
2014/02/08 职场文书
本科应届生求职信
2014/08/05 职场文书
坎儿井导游词
2015/02/09 职场文书
营业员岗位职责
2015/02/11 职场文书
2015年乡镇财政工作总结
2015/05/19 职场文书
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js
教你怎么用Python生成九宫格照片
2021/05/20 Python
keepalived + nginx 实现高可用方案
2022/12/24 Servers