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的tree组件
Dec 03 Vue.js
vue监听滚动事件的方法
Dec 21 Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
vue-element-admin项目导入和导出的实现
May 21 Vue.js
详解vue身份认证管理和租户管理
May 25 Vue.js
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
vue项目打包后路由错误的解决方法
Apr 13 Vue.js
vue 把二维或多维数组转一维数组
Apr 24 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
分享8个最佳的代码片段在线测试网站
2013/06/29 PHP
自编函数解决pathinfo()函数处理中文问题
2014/11/03 PHP
Yii学习总结之安装配置
2015/02/22 PHP
PHP人民币金额转大写实例代码
2015/10/02 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
laravel Validator ajax返回错误信息的方法
2019/09/29 PHP
laravel使用数据库测试注意事项
2020/04/10 PHP
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
2014/05/27 Javascript
jQuery应用之jQuery链用法实例
2015/01/19 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
JQuery中attr方法和removeAttr方法用法实例
2015/05/18 Javascript
JavaScript中的lastIndexOf()方法使用详解
2015/06/06 Javascript
Javascript删除指定元素节点的方法
2016/06/21 Javascript
简单实现IONIC购物车功能
2017/01/10 Javascript
webpack搭建vue 项目的步骤
2017/12/27 Javascript
Node.js使用Angular简单示例
2018/05/11 Javascript
JS倒计时两种实现方式代码实例
2020/07/27 Javascript
python的类方法和静态方法
2014/12/13 Python
Python新手实现2048小游戏
2015/03/31 Python
python解决Fedora解压zip时中文乱码的方法
2016/09/18 Python
Python异常对代码运行性能的影响实例解析
2018/02/08 Python
python利用Tesseract识别验证码的方法示例
2019/01/21 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
表单button的outline在firefox浏览器下的问题
2012/12/24 HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
2018/01/29 HTML / CSS
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
What is view? why do we have view?
2012/06/22 面试题
高级护理实习生自荐信
2013/09/28 职场文书
拓展培训心得体会
2014/01/04 职场文书
团队经理竞聘书
2014/03/31 职场文书
合作意向协议书范本
2014/03/31 职场文书
结婚保证书范文
2014/04/29 职场文书
大学生学习面向未来的赶考思想汇报
2014/09/12 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
PHP设计模式(观察者模式)
2021/07/07 PHP