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 相关文章推荐
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
Vue中computed和watch有哪些区别
Dec 19 Vue.js
vue中使用echarts的示例
Jan 03 Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
vue3中的组件间通信
Mar 31 Vue.js
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
vue @ ~ 相对路径 路径别名设置方式
Jun 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
腾讯QQ php程序员面试题目整理
2010/06/08 PHP
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
ThinkPHP CURD方法之limit方法详解
2014/06/18 PHP
浅谈PDO的rowCount函数
2015/06/18 PHP
Ubuntu上安装yaf扩展的方法
2018/01/29 PHP
jQuery 使用个人心得
2009/02/26 Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
2010/10/20 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
2011/05/12 Javascript
解析Javascript中大括号“{}”的多义性
2013/12/02 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
2015/03/12 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
2016/03/02 Javascript
artDialog+plupload实现多文件上传
2016/07/19 Javascript
总结javascript中的六种迭代器
2016/08/16 Javascript
详解JavaScript树结构
2017/01/09 Javascript
vue watch监听对象及对应值的变化详解
2018/02/24 Javascript
解决vue路由后界面没有变化,但是链接有的问题
2018/09/01 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
2019/01/30 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
2020/08/03 Javascript
JavaScript数组常用的增删改查与其他属性详解
2020/10/13 Javascript
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
python 将数据保存为excel的xls格式(实例讲解)
2018/05/03 Python
django连接mysql配置方法总结(推荐)
2018/08/18 Python
python将txt等文件中的数据读为numpy数组的方法
2018/12/22 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
详解如何用TensorFlow训练和识别/分类自定义图片
2019/08/05 Python
Python-for循环的内部机制
2020/06/12 Python
python文件读取失败怎么处理
2020/06/23 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
如何利用python进行时间序列分析
2020/08/04 Python
Python数据分析库pandas高级接口dt的使用详解
2020/12/11 Python
澳大利亚墨尔本的在线时装店:LORETA
2018/09/14 全球购物
九年级体育教学反思
2014/01/23 职场文书
2015国庆节66周年演讲稿
2015/03/20 职场文书
Nginx实现会话保持的两种方式
2022/03/18 Servers
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python