Vue全局事件总线你了解吗
作者:richest_qi 时间:2024-04-28 09:25:11
全局事件总线,是组件间的一种通信方式,适用于任何组件间通信。
看下面具体的例子。
父组件: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,子组件Company
和Employee
子组件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事件。
来源:https://blog.csdn.net/qzw752890913/article/details/123057294
标签:Vue,全局,事件,总线
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2021-10-06 12:37:55
![](https://img.aspxhome.com/file/2023/2/127252_0s.jpg)
Python实现实时数据采集新型冠状病毒数据实例
2021-04-23 14:18:38
![](https://img.aspxhome.com/file/2023/4/133504_0s.jpg)
python如何提取xml指定内容
2021-07-02 01:21:10
![](https://img.aspxhome.com/file/2023/9/68899_0s.png)
vue使用Element el-upload 组件踩坑记
2023-07-02 16:32:17
![](https://img.aspxhome.com/file/2023/0/139700_0s.png)
如何使用django的MTV开发模式返回一个网页
2023-07-04 21:47:06
![](https://img.aspxhome.com/file/2023/9/75139_0s.jpg)
详解Python3 对象组合zip()和回退方式*zip
2021-03-01 11:14:09
![](https://img.aspxhome.com/file/2023/2/115432_0s.webp)
Python实现基本数据结构中栈的操作示例
2021-09-04 10:29:23
![](https://img.aspxhome.com/file/2023/4/121614_0s.png)
如何快速一次性卸载所有python包(第三方库)呢
2022-08-18 12:12:58
python中使用 xlwt 操作excel的常见方法与问题
2021-09-12 05:10:02
python+selenium定时爬取丁香园的新型冠状病毒数据并制作出类似的地图(部署到云服务器)
2022-12-31 16:20:14
![](https://img.aspxhome.com/file/2023/1/101431_0s.jpg)
用vuex写了一个购物车H5页面的示例代码
2024-05-08 10:43:09
![](https://img.aspxhome.com/file/2023/9/127409_0s.jpg)
关于Python核心框架tornado的异步协程的2种方法详解
2022-01-24 08:26:00
![](https://img.aspxhome.com/file/2023/1/86461_0s.jpg)
利用pandas向一个csv文件追加写入数据的实现示例
2022-04-09 14:51:56
打开电脑上的QQ的python代码
2022-08-18 04:21:28
对Python3 pyc 文件的使用详解
2023-05-02 01:54:57
asp如何防止计数器刷新计数?
2009-11-22 19:19:00
perl 调试命令的相关知识小结
2022-10-01 14:09:48
做购物车系统时利用到得几个sqlserver 存储过程
2024-01-13 10:05:48
python批量查询、汉字去重处理CSV文件
2023-01-20 08:27:17
如何判断pytorch是否支持GPU加速
2023-10-06 11:46:49
![](https://img.aspxhome.com/file/2023/2/134482_0s.png)