Vue学习之--------全局事件总线(2022/8/22)
文章目录
1、全局事件总线基础知识(GlobalEventBus)
1、一种组件间通信的方式,适用于任意组件间通信。
2、安装全局事件总线:
提示:在main.js中安装全局事件总线
new Vue({
......
beforeCreate() {
Vue.prototype.$bus = this //安装全局事件总线,$bus就是当前应用的vm
},
......
})
3、使用事件总线:
- 接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身。
methods(){
demo(data){......}
}
......
mounted() {
this.$bus.$on('xxxx',this.demo)
}
- 提供数据:
this.$bus.$emit('xxxx',数据)
4、最好在beforeDestroy钩子中,用$off去解绑当前组件所用到的事件。
2、图解过程
3、代码实例
实现组件间的通信(通过全局事件总线)
3.1 main.js
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false
//创建vm
new Vue({
el:'#app',
render: h => h(App),
beforeCreate() {
Vue.prototype.$bus = this
},
})
3.1 App.vue
<template>
<div class="app">
<h1>{{msg}}</h1>
<School/>
<Student/>
</div>
</template>
<script>
import Student from './components/Student'
import School from './components/School'
export default {
name:'App',
components:{School,Student},
data() {
return {
msg:'你好啊!',
}
}
}
</script>
<style scoped>
.app{
background-color: gray;
padding: 5px;
}
</style>
3.2 School.vue
<template>
<div class="school">
<h2>学校名称:{{name}}</h2>
<h2>学校地址:{{address}}</h2>
</div>
</template>
<script>
export default {
name:'School',
data() {
return {
name:'尚硅谷',
address:'北京',
}
},
mounted() {
// console.log('School',this)
this.$bus.$on('hello',(data)=>{
console.log('我是School组件,收到了数据',data)
})
},
beforeDestroy() {
this.$bus.$off('hello')
},
}
</script>
<style scoped>
.school{
background-color: skyblue;
padding: 5px;
}
</style>
3.3 Student.vue
<template>
<div class="student">
<h2>学生姓名:{{name}}</h2>
<h2>学生性别:{{sex}}</h2>
<button @click="sendStudentName">把学生名给School组件</button>
</div>
</template>
<script>
export default {
name:'Student',
data() {
return {
name:'张三',
sex:'男',
}
},
mounted() {
// console.log('Student',this.x)
},
methods: {
sendStudentName(){
this.$bus.$emit('hello',this.name)
}
},
}
</script>
<style lang="less" scoped>
.student{
background-color: pink;
padding: 5px;
margin-top: 30px;
}
</style>
Vue学习之--------全局事件总线(2022/8/22)的更多相关文章
- 如何在 pyqt 中实现全局事件总线
前言 在 Qt 中可以使用信号和槽机制很方便地实现部件之间的通信,考虑下面这样的场景: 我想要点击任意一个专辑卡并通知主界面跳转到专辑界面,那么一种实现方式如上图所示:点击任意一个蓝色方框所示的专辑卡 ...
- 组件通信之全局事件总线 & 消息订阅发布
全局事件总线 介绍 一种组件间通信的方式,适用于任意组件间通信. 在使用全局事件总线之前需要一些知识准备 所有组件实例的原型对象的原型对象就是 Vue 的原型对象,即VueComponent.prot ...
- 记一笔vue中的中央事件总线的问题,以及解决方案
代码结构:首先HeaderNav组件是被单独拎出来的,router-view中就对应了内容组件,由于有时候i有的界面的header内容是不一样的,因此要用到兄弟组件的相互通信,这个时候我首先选择了bu ...
- vue学习笔记(四)事件处理器
前言 在上一章vue学习笔记(三)class和style绑定的内容中,我们学习了如何在vue中绑定class和style,介绍了常用的绑定方法,class的数组绑定和对象绑定以及style的数组绑定和 ...
- vue兄弟组件传值——事件总线
1.创建一个js文件,例如msg.js,放到合适位置,例如components中,或者其他位置也行.然后在兄弟两个组件中分别引入msg.js文件 msg.js: import Vue from 'vu ...
- Vue学习之全局和私有组件小结(七)
一.组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用相应的组件即可. 二.组件和模块: 1.模块化:是从代码逻 ...
- Vue bus的使用(兄弟|非父子组件传值)-->可以使用一个空的Vue实例作为中央事件总线new Vue()
1.在main.js中注册全局的bus Vue.prototype.bus=new Vue(); 2.在组建中使用 子组建使用:this.bus.$emit('自定义事件名',data) metho ...
- 38.VUE学习之-全局组件和局部组件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- 29.VUE学习之--键盘事件.键盘修饰符的实例讲解
键盘事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
随机推荐
- 【PMP学习笔记】第4章 项目整合管理
[PMP学习笔记]第4章 项目整合管理 一.项目整合管理 什么是项目整合管理? 项目整合管理由项目经理负责.虽然其他知识领域可以由相关专家(如成本分析专家.进度规划专家.风险管理专家)管理,但是项目整 ...
- BS架构与CS架构
BS与CS的区别:1.BS是标准规范的,CS的协议自定义:2.BS核心运算都在服务器端,CS客户端和服务器端都可以运算:3.BS只需要部署服务器端,CS需要同时升级客户端和服务器端. CS(Clien ...
- mui 登录跳转到首页之后顶部选项卡不灵敏问题
前段时间开发一个用mui开发app的时候遇到了登录跳转到首页之后顶部选项卡会失灵的问题,多次尝试之后终于解决了,趁现在还有点印象记录一下吧. 一开始我是用mui.openWindow来新开首页的,出了 ...
- Linux下一键安装Python3&更改镜像源&虚拟环境管理技巧
前言 之前分享过一篇<Linux系统自带Python2&yum的卸载及重装>,介绍了如何卸载及重装Linux(CentOS)自带的的Python2.7.今天主要介绍如何在Linux ...
- ETCD快速入门-03 常用命令
3. ETCD 常用命令 etcdctl是一个命令行的客户端,它提供了一些命令,可以方便我们在对服务进行测试或者手动修改数据库内容.etcdctl与kubectl和systemctl的命令原理 ...
- React报错之Type '() => JSX.Element[]' is not assignable to type FunctionComponent
正文从这开始~ 总览 当我们尝试从函数组件中返回元素组成的数组时,会产生"Type '() => JSX.Element[]' is not assignable to type Fu ...
- DECIMAL 数据处理原理浅析
注:本文分析内容基于 MySQL 8.0 版本 文章开始前先复习一下官方文档关于 DECIMAL 类型的一些介绍: The declaration syntax for a DECIMAL colum ...
- PI控制器的由来
20世纪20年代初,一位名叫尼古拉斯·米诺斯基(Nicolas Minorsky)的俄裔美国工程师通过观察舵手在不同条件下如何驾驶船只,为美国海军设计了自动转向系统. 根据Wikipedia.org, ...
- Homework4
书籍链接:https://www.ituring.com.cn/article/13466(why Software Development Methodologies Suck?) 问:读 why ...
- KingbaseES 实现MYSQL hex/unhex 函数
MySQL 的hex 和 unhex 函数类似于KingbaseES 的encode 和 decoding,实现字符与16进制之间的转换. 一.先看MySQL例子 mysql> select h ...