vue 3.0 总线程bus引入(mitt)
vue 3.0 移除了 $on,$off 和 $once 方法,$emit 仍然是现有 API 的一部分,因为它用于触发由父组件以声明方式附加的事件处理程序.
官方推荐使用第三方类库。 mitt举例:
1、执行 npm install --save mitt 加载依赖
2、创建bus.js 文件内容如下:(可与main.js同级)
import mitt from 'mitt'
const bus = {}
const emitter = mitt()
bus.$on = emitter.on
bus.$off = emitter.off
bus.$emit = emitter.emit
export default bus
3、main.js 加入内容如下:
import Bus from './bus.js'/// mitt 总线程引入
Vue.prototype.bus = Bus;
4、使用如下:
兄组件:
methods: {
workOrdChange(val) {
let self = this;
self.bus.$emit('dr-workOrd-change', val)
}
}
弟组件:
created() {
let self = this;
self.bus.$on("dr-workOrd-change", (val) => {
let drO = val;
console.log("drO in" + drO);
});
},
完毕!
vue 3.0 总线程bus引入(mitt)的更多相关文章
- vue cli3.0 封装组件全局引入js文件并发布到npm
首先用 vue create创建一个项目 当前的项目目录是这样的: 首先需要创建一个 packages 目录,用来存放组件 然后将 src 目录改为 examples 用作示例 二.修改配置 启动项目 ...
- Vue 3.0 升级指南
本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 2020年9月18日Vue 3.0正式发布,距离2016年10月1日Vue ...
- [转]Vue 2.0——渐进式前端解决方案
前言:框架是什么?为什么要有框架?在众多的框架之中,Vue 独具魅力之处在哪里呢?其背后的核心思想是什么?Vue 究竟火到什么程度?最近发布的 Vue2.0 又做了哪些改进呢?Vue 和 Weex 又 ...
- 以寡治众各个击破,超大文件分片上传之构建基于Vue.js3.0+Ant-desgin+Tornado6纯异步IO高效写入服务
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_218 分治算法是一种很古老但很务实的方法.本意即使将一个较大的整体打碎分成小的局部,这样每个小的局部都不足以对抗大的整体.战国时期 ...
- Vue 2.0初学后个人总结及分享
摘要:最近在上海找工作,发现Vue前景还不错,于是就打算先学习一下(之前了解过,但是一直没提到日程上)这篇随笔当是为了自己学习之后,做一个小的阶段性总结.希望本文的内容对于刚开始接触vue的朋友们有点 ...
- Vue 2.0基础语法:系统指令
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. Vue初体验 新建一个空的项目,引入vue.js文件.写如下代码: &l ...
- vue-calendar 基于 vue 2.0 开发的轻量,高性能日历组件
vue-calendar-component 基于 vue 2.0 开发的轻量,高性能日历组件 占用内存小,性能好,样式好看,可扩展性强 原生 js 开发,没引入第三方库 Why Github 上很多 ...
- vue cli3.0 结合echarts3.0和地图的使用方法
echarts 提供了直观,交互丰富,可高度个性化定制的数据可视化图表.而vue更合适操纵数据. 最近一直忙着搬家,就没有更新博客,今天抽出空来写一篇关于vue和echarts的博客.下面是结合地图的 ...
- vue.js2.0+elementui ——> 后台管理系统
前言: 因为观察到vue.js的轻量以及实时更新数据的便捷性,于是新项目便决定使用vue.js2.0以及与之配套的elementui来完成.只是初次接触新框架,再使用过程中,遇见了各种各样“奇葩”的问 ...
- vue.js2.0实战(1):搭建开发环境及构建项目
Vue.js学习系列: vue.js2.0实战(1):搭建开发环境及构建项目 https://my.oschina.net/brillantzhao/blog/1541638 vue.js2.0实战( ...
随机推荐
- NG-ZORRO + Angular11使用Echarts实现柱折线图-折柱混合,并给图表添加点击打印图表数据!!!详细代码
先上效果图 HTML代码 <div echarts #myEchart [options]="option"></div> ts代码 import { Co ...
- 【C++ 数据结构:链表】二刷LeetCode707设计链表
[C++链表] 使用c++重新写一遍LeetCode707设计链表 目的是熟悉c++中链表的操作 知识点 C++链表节点的实现 在c++中,一般通过结构体来定义链表的节点,也需要写构造函数(使用初始化 ...
- 小白从零到AIoT之路(前言)
什么是AIoT 简单来说就是AI(人工智能)+IoT(物联网)= AIoT(人工智能物联网). AIoT融合AI技术和IoT技术,通过物联网产生.收集来自不同维度的.海量的数据存储于云端.边缘端,再通 ...
- 如何通过Java代码向Word文档添加文档属性
Word文档属性包括常规.摘要.统计.内容.自定义.其中摘要包括标题.主题.作者.经理.单位.类别.关键词.备注等项目.属性相当于文档的名片,可以添加你想要的注释.说明等.还可以标注版权. 今天就为大 ...
- Python 装饰器原理
装饰器是 Python 编程中常用的一个功能,可以将通用的逻辑抽象成装饰器,通过装饰器语法应用到不同的目标上,达到增强或修改目标逻辑的目的. 先来看一个简单的例子 # 打印耗时的装饰器 def log ...
- 重学SpringBoot. step6 SpringBoot高级技巧
SpringBoot高级技术 博客地址: step6 SpringBoot高级技巧 异步线程池 书上讲的是什么像异步操作那样,然后不需要等待. 问题是,不需要等待,但数据在生成的时候的时间并不能省. ...
- .net core 从(本地)服务器获取APK文件并解析APK信息
1.apk解析除了使用客户端利用aapt.exe.unzip.exe开发客户端解析外,还可以直接利用服务进行解析 /// <summary> /// 从本地服务器获取APK文件并解析APK ...
- 一文搞懂 DevOps
前言 DevOps作为一个热门的概念,近年来频频出现在各大技术社区和媒体的文章中,备受行业大咖的追捧,也吸引了很多吃瓜群众的围观. 那么,DevOps是什么呢? 有人说它是一种方法,也有人说它是一种工 ...
- C++练习12 字符串成员函数的使用
1 #include <iostream> 2 #include <string> 3 using namespace std; 4 int main() 5 { 6 stri ...
- 使用一个文件集中管理你的 Nuget 依赖版本号
在 .net 7 以前,项目对于 nuget 依赖项的版本依赖散落与解决方案的各个角落.这导致升级维护和查看的时候都比较麻烦.在 .net 7 中,你可以使用一个文件来集中管理你的 Nuget 依赖版 ...