Vue中全局事件总线的配置和原理

实现任意组件之间的通信

  • 任意组件通信的原理:

  • 1、实现任意组件之间的通信,需要一个傀儡。这个傀儡既能被vm访问到,也能被VueComponent访问。

    2、VueComponent.prototype.proto === Vue.prototype为图上1.0黄色的线路。是Vue让组件实例对象VueComponent可以访问到Vue原型上的属性、方法($mount......)

    3、傀儡位置放在Vue的原型对象上,一个个VueComponent可以通过黄线访问到Vue的原型对象。下列代码非标准写法

  • //整段代码为main.js
    import Vue from 'vue'
    import App from './App'
    ​
    //下面代码为非标准写法
    const Demo = Vue.extend({})//创建VueComponent
    const d = new Demo()//VueComponent的实例对象可以new出来。
    Vue.prototype.x = d//Vue.prototype.x的意思是在Vue的原型对象上放置傀儡x。d是VueComponent可以访问$mount,$watch等方法或属性
    ​
    ​
    //下面代码为标准写法
    //因为VueComponent可以访问Vue的原型对象上。标准写法可以用vm不用vc,只要调整代码执行顺序上符合Vue的底层运行即可
    //new Vue({})为创建vm
    new Vue({el: '#app',router,components: { App },template: '<App/>',//  beforeCreate的作用是在vm未访问data中的数据或方法时将傀儡放置beforeCreate(){//  傀儡的名字改成$bus,bus为总线的意思。$是迎合Vue的设置给程序员用,this指的创建的vmVue.prototype.$bus = this}
    })
     
  • 图1.0中箭头的意思是:逐层访问。例如VueComponent->VueComponent的原型对象->Vue的原型对象。VC在VC原型对象找不到的方法或属性,可以在Vue的原型对象中查找

  • Student组件

  • Student组件向傀儡发送信息,等待其他组件事件的触发和返回的数据。

  • <template><div class="blue"><h2>学生的名字:{{ name }}</h2><h2>学生的名字:{{ address }}</h2></div>
    </template>
    ​
    <script>
    export default {name:'Student',data(){return {name:'boy',address:'老地方'}},//非标准写法mounted() {console.log('Student', this);//this为VueComponent//下面实现兄弟组件的通信,this.x也是VueComponent,main.js配置过this.x.$on('hello',(data)=>{console.log('我是Student组件,我接收了数据data',data);})},//标准写法和上面一样的代码。把x改成$bus即可 //由于傀儡是写在源码上的, 当删除某个组件。该组件绑定在傀儡的事件还保留。故用beforeDestroy将其解绑beforeDestroy() {this.$bus.$off('hello')//注意:this.$bus.$off()括号内什么都不填则将傀儡都删了,其他组件绑定到傀儡的事件也不好用了}
    }
    </script>
    <style scoped>.blue{background-color: blue;padding: 5px;}
    </style>
    ​
  • School组件

  • School组件触发事件向Student组件发送666

  • <template><div class="school"><h2>学校的名字:{{ name  }}</h2><button @click="sendSchoolName">测试sendSchoolName方法</button></div>
    </template>
    ​
    <script>
    export default {data(){return {name: '小猴子的玩具商'}},//非标准写法methods:{sendSchoolName(){//找到this.x触发Student组件的hello事件,并传数据给Student组件this.x.$emit('hello',666)}},//标准写法和上面一样的代码,把x改成$bus即可 
    }
    </script>
    <style scoped>.school {background-color: pink;padding: 5px;margin-top: 30px;}
    </style>>
     

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/593031.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Invalid options in vue.config.js: “plugins“ is not allowed

项目场景&#xff1a; 安装并配置elementPlus报错。 问题描述 "plugins" is not allowed. plugins不被允许。参考官网修改配置文件vue.config.js。 解决方案&#xff1a; const AutoImport require(unplugin-auto-import/webpack) const Components require(un…

阿里云Alibaba Cloud Linux 3镜像版本清单2024更新

Alibaba Cloud Linux阿里云打造的Linux服务器操作系统发行版&#xff0c;Alibaba Cloud Linux完全兼容完全兼容CentOS/RHEL生态和操作方式&#xff0c;目前已经推出Alibaba Cloud Linux 3&#xff0c;阿里云百科aliyunbaike.com分享Alibaba Cloud Linux 3版本特性说明&#xff…

即时通讯技术文集(第30期):IM开发综合技术合集(Part3) [共16篇]

为了更好地分类阅读 52im.net 总计1000多篇精编文章&#xff0c;我将在每周三推送新的一期技术文集&#xff0c;本次是第30 期。 ​[- 1 -] 全面掌握移动端主流图片格式的特点、性能、调优等 [链接] http://www.52im.net/thread-1802-1-1.html [摘要] 本文我们一起全面分析学…

HCIA-Datacom题库(自己整理分类的)——其他网络协议【完】

&#xff08;一&#xff09;单选 下列属于链路状态协议的是? Direct static FTP OSPF 解析&#xff1a; FTP&#xff1a;文件传输协议 OSPF&#xff1a;链路状态路由协议 如下图所示的网络主机A通过Telnet登录到路由器A然后在远程的界面通过FTP获取路由器的配置文件&…

学习调整echarts中toolbox位置toolBox工具栏属性

学习调整echarts中toolbox位置toolBox工具栏属性 toolbox工具栏属性介绍示例代码代码参数说明 toolbox工具栏属性介绍 参考网址&#xff1a;https://echarts.apache.org/zh/option.html#tooltip 属性类型说明toolbox.showbooleanboolean 默认值为true&#xff0c;是否显示工具…

studio3T mongodb 根据查询条件去更新集合

mongodb 等于、不等于$ne、不包含 $nin 以及批量更新数据的使用。 业务场景&#xff1a; 在集合中&#xff0c;根据查询条件&#xff0c;更新数据状态。 实现代码&#xff1a; 1. 部门名称为XXX、状态不等于“完好”的、并且不包含这些编码的数据先查询出来2. 再把状态更新成…

多边形压缩 Douglas-Peucker算法

多边形压缩Douglas-Peucker算法&#xff0c;上代码&#xff01; #include <iostream> #include <cmath> #include <utility> #include <vector> #include <stdexcept> #include <opencv2/opencv.hpp> // 包含OpenCV头文件using namespace…

c++语句详细介绍

文章目录 前言简单语句语句作用域1. 局部作用域2. 全局作用域3. 命名空间作用域4. 块作用域 条件语句1. If语句2. Else语句3. Else If语句4. Switch语句5. 嵌套条件语句6. 条件运算符 循环语句1. While循环2. Do-While循环3. For循环4. 范围Based For循环&#xff08;C11及以上…

Linux内核--进程管理(七)进程的核心—task_truct

目录 一、引言 二、调度机制介绍 ------>2.1、任务ID ------>2.2、亲缘关系 ------>2.3、任务状态 ------>2.4、任务权限 ------------>2.4.1、capabilities ------>2.5、运行统计 ------------>2.5.1、pidstat ------>2.6、进程调度 -----…

This is probably not a problem with npm.

项目场景&#xff1a; 新创建的vue3项目&#xff0c;根据elementplus官网安装步骤进行按需导入安装&#xff0c;运行项目报错 This is probably not a problem with npm.There is likely additional logging output above. 原因分析&#xff1a; 是elementplus安装版本和自动…

Python随机点名

python随机点名 # 生成 0 ~ 9 之间的随机数 # 导入 random(随机数) 模块 import random print(random.randint(0,9)) 执行以上代码输出结果为: 4 尝试一下 以上实例我们使用了 random 模块的 randint() 函数来生成随机数&#xff0c;你每次执行后都返回不同的数字&a…

什么是Vue.js的响应式系统(reactivity system)?如何实现数据的双向绑定?

Vue.js的响应式系统是指一种能够跟踪数据变化并实时更新相关界面的机制。它是Vue.js框架的核心特性之一。 在Vue.js中&#xff0c;你可以使用数据绑定语法将数据绑定到DOM元素上。当绑定的数据发生变化时&#xff0c;Vue.js会自动监听这些变化并更新相关的DOM元素。 Vue.js实…

玩转贝启科技BQ3588C开源鸿蒙系统开发板 —— 编译构建及此过程中的踩坑填坑(1)

接前一篇文章&#xff1a;玩转贝启科技BQ3588C开源鸿蒙系统开发板 —— 代码下载&#xff08;2&#xff09; 本文主要参考&#xff1a; BQ3588C_代码下载 上一回完成了代码下载&#xff0c;本回开始进行编译构建。 1. 编译构建 &#xff08;1&#xff09;执行prebuilts 在源…

lc338 比特位计数

lc338 比特位计数 问题&#xff1a; 给一个整数n&#xff0c;遍历0-n的每一个值&#xff0c;统计每个值二进制中1的个数&#xff0c;返回长度为n1的数组。 题解&#xff1a; Brian Kernighan’s 算法。这个算法的核心思想是每次去掉二进制中最右边的一个1&#xff0c;直到所有…

JavaScript可选链接

注&#xff1a;本节仍然使用之前的饭店的对象&#xff0c;可以看上几篇文章查看代码 ● 如果我们想要看看饭店周一的开门时间&#xff0c;我们会这么写 console.log(restaurant.openingHours.mon.open);原因是我们在开放时间中并没有定义周一的开放时间&#xff0c;所有会报错…

2024年工作计划与目标怎么写?如何用手机制作工作待办清单

2024年的钟声已经到来&#xff0c;对于上班族来说&#xff0c;制定一份切实可行的工作计划与目标是非常有必要的。但是&#xff0c;很多人不知道2024年工作计划与目标怎么写&#xff1f;其实&#xff0c;关键在于明确目标、细化计划、合理安排时间&#xff0c;以确保每一步都稳…

python协程

背景 很早之前有一篇中断地关于协程的文章&#xff0c;彼时从js的事件循环切入,对比学习python的asyncio,感觉是个很大的知识点&#xff0c;想写的内容很多&#xff0c;遂搁浅。本次&#xff0c;抽空补齐这块的内容。 序 协程是什么? 协程是个非常好的概念&#xff0c;它在用…

BIO和NIO编程(待完善)

目录 IO模型 BIO NIO 常见问题 IO模型 Java共支持3种网络编程IO模式&#xff1a;BIO&#xff0c;NIO&#xff0c;AIO BIO 同步阻塞模型&#xff0c;一个客户端连接对应一个处理线程 代码示例&#xff1a; Server端&#xff1a; public class BioServer {private static …

window下载安装Mongodb数据库

我们先要访问他的官网 https://www.mongodb.com/zh-cn 然后顶部导航栏 选择 (Products/产品) 下的 (Community Edition/社区版) 进入界面后 找到 MongoDB Community Server Download 点击下面的按钮 Select package 然后会弹到这个位置 第一个版本 用系统默认选择的就好 第二…