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)的更多相关文章

  1. vue cli3.0 封装组件全局引入js文件并发布到npm

    首先用 vue create创建一个项目 当前的项目目录是这样的: 首先需要创建一个 packages 目录,用来存放组件 然后将 src 目录改为 examples 用作示例 二.修改配置 启动项目 ...

  2. Vue 3.0 升级指南

    本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 2020年9月18日Vue 3.0正式发布,距离2016年10月1日Vue ...

  3. [转]Vue 2.0——渐进式前端解决方案

    前言:框架是什么?为什么要有框架?在众多的框架之中,Vue 独具魅力之处在哪里呢?其背后的核心思想是什么?Vue 究竟火到什么程度?最近发布的 Vue2.0 又做了哪些改进呢?Vue 和 Weex 又 ...

  4. 以寡治众各个击破,超大文件分片上传之构建基于Vue.js3.0+Ant-desgin+Tornado6纯异步IO高效写入服务

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_218 分治算法是一种很古老但很务实的方法.本意即使将一个较大的整体打碎分成小的局部,这样每个小的局部都不足以对抗大的整体.战国时期 ...

  5. Vue 2.0初学后个人总结及分享

    摘要:最近在上海找工作,发现Vue前景还不错,于是就打算先学习一下(之前了解过,但是一直没提到日程上)这篇随笔当是为了自己学习之后,做一个小的阶段性总结.希望本文的内容对于刚开始接触vue的朋友们有点 ...

  6. Vue 2.0基础语法:系统指令

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. Vue初体验 新建一个空的项目,引入vue.js文件.写如下代码: &l ...

  7. vue-calendar 基于 vue 2.0 开发的轻量,高性能日历组件

    vue-calendar-component 基于 vue 2.0 开发的轻量,高性能日历组件 占用内存小,性能好,样式好看,可扩展性强 原生 js 开发,没引入第三方库 Why Github 上很多 ...

  8. vue cli3.0 结合echarts3.0和地图的使用方法

    echarts 提供了直观,交互丰富,可高度个性化定制的数据可视化图表.而vue更合适操纵数据. 最近一直忙着搬家,就没有更新博客,今天抽出空来写一篇关于vue和echarts的博客.下面是结合地图的 ...

  9. vue.js2.0+elementui ——> 后台管理系统

    前言: 因为观察到vue.js的轻量以及实时更新数据的便捷性,于是新项目便决定使用vue.js2.0以及与之配套的elementui来完成.只是初次接触新框架,再使用过程中,遇见了各种各样“奇葩”的问 ...

  10. vue.js2.0实战(1):搭建开发环境及构建项目

    Vue.js学习系列: vue.js2.0实战(1):搭建开发环境及构建项目 https://my.oschina.net/brillantzhao/blog/1541638 vue.js2.0实战( ...

随机推荐

  1. ng + zorro angular表格横纵向合并,横向目前是手动,纵向是自动合并,微调后可适配三大框架使用

    表格横纵向合并,可以看一下代码编写之前和之后的样式,先上图~~ 表格页面文件.html <h1>正常表格</h1> <nz-table #colSpanTable [nz ...

  2. 都用过@Autowired,但你知道它是怎么实现的吗

    前言 在使用Spring开发的时候,配置的方式主要有两种,一种是xml的方式,另外一种是 java config的方式.在使用的过程中java config,我们难免会与注解进行各种打交道,其中,我们 ...

  3. OpenMP For Construct dynamic 调度方式实现原理和源码分析

    OpenMP For Construct dynamic 调度方式实现原理和源码分析 前言 在本篇文章当中主要给大家介绍 OpenMp for construct 的实现原理,以及与他相关的动态库函数 ...

  4. windows10环境下的RabbitMQ安装步骤

    RabbitMQ是一个在AMQP协议标准基础上完整的,可复用的企业消息系统.它遵循Mozilla Public License开源协议,采用 Erlang 实现的工业级的消息队列(MQ)服务器,Rab ...

  5. ASP.NET Core开发者指南(2022版路线图)

    ASP.NET Core开发者指南 2022年 ASP.NET Core 开发者指南: 在下面,您可以看到一个图,说明可以采用的路径以及要成为ASP.NET Core开发人员所想要学习的库.我将此图作 ...

  6. Vue-cli混入、elementUI的使用、vue-router、Vuex

    目录 混入.elementUI的使用.vue-router.Vuex 一.Vue项目改成比较纯净的状态及props其他使用 1.Vue项目改成纯净的项目 2.props的其他使用 二.混入(mixin ...

  7. JZOJ 4744.同余

    \(\text{Problem}\) \(\text{Solution}\) 考虑 \(60\) 分 设 \(f_{i,j,k}\) 表示前 \(i\) 个数,模 \(j\) 同余 \(k\) 的个数 ...

  8. JZOJ 3213. 【SDOI2013】直径

    题目 思路 树的直径很好求,两遍 \(dfs\),记下两个端点 然后很显然所有直径经过的边必然在我们求出的这条直线上 那么我们只要判断一下一条直径上的边是不是答案 假设当前边为 \(i\) 那么把 \ ...

  9. JZOJ 2483. 【GDKOI 2021提高组DAY1】回文(palindrome)

    题目 求区间最长回文串长度 \(1 \le n\le 5 \times 10^5\) 题解 比较妙的做法,主要是在询问部分 预处理出以某位为中心回文半径长 \(p_i\),马拉车和二分+哈希均可 然后 ...

  10. 提取show config命令结果

    import re import os # 从命令收集日志文件中,提取show config命令结果. file_list = os.listdir(os.getcwd()) dirname = os ...