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使用vant中的checkbox实现全选功能
Nov 17 Vue.js
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
对vue生命周期的深入理解
Dec 03 Vue.js
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
Vue仿Bibibili首页的问题
Jan 21 Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
如何在 Vue 中使用 JSX
Feb 14 Vue.js
如何使用vue3打造一个物料库
May 08 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
vue打包时去掉所有的console.log
Apr 10 Vue.js
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 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(4) php 函数 补充2
2010/02/15 PHP
PHP 函数学习简单小结
2010/07/08 PHP
Yii2创建控制器(createController)方法详解
2016/07/23 PHP
PHP二维索引数组的遍历实例分析【2种方式】
2019/06/24 PHP
PHP实现通过二维数组键值获取一维键名操作示例
2019/10/11 PHP
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
Gird组件 Part-3:范例RSSFeed Viewer
2007/03/10 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
js获取元素外链样式的方法
2015/01/27 Javascript
JavaScript简单获取系统当前时间完整示例
2016/08/02 Javascript
微信小程序--组件(swiper)详细介绍
2017/06/13 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
浅谈Angular单元测试总结
2019/03/22 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
Vue学习之axios的使用方法实例分析
2020/01/06 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
浅析Python基础-流程控制
2016/03/18 Python
Python如何快速实现分布式任务
2017/07/06 Python
python绘制直线的方法
2018/06/30 Python
Django实现学生管理系统
2019/02/26 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
详解Python下载图片并保存本地的两种方式
2019/05/15 Python
关于Python错误重试方法总结
2021/01/03 Python
新员工培训个人的自我评价
2013/10/09 职场文书
趣味活动策划方案
2014/02/08 职场文书
青春励志演讲稿
2014/04/29 职场文书
三八妇女节演讲稿
2014/05/27 职场文书
企业公益活动策划方案
2014/08/24 职场文书
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
校园环境卫生倡议书
2015/04/29 职场文书
出生证明格式
2015/06/15 职场文书
考教师资格证不要错过的4个最佳时机
2019/07/17 职场文书
Python内置数据类型中的集合详解
2022/03/18 Python