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. Flink1.15仅支持ZooKeeper3.5/3.6

    这是一个验证贴,因为社区文档是错误的. 先说结论 Flink1.15仅支持ZooKeeper3.5/3.6,不再支持3.4.FLINK-25146 Drop support for Zookeeper ...

  2. RocketMQ Streams 1.1.0: 轻量级流处理再出发

    本文作者:倪泽,Apache RocketMQ committer.RSQLDB/RocketMQ Streams Maintainer 01 背景 RocketMQ Streams是一款基于Rock ...

  3. vue学习笔记(七)---- vue中的路由

    一.什么是路由 对于普通的网站来说,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源 对应单页面的应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,h ...

  4. 【Oculus Interaction SDK】(三)限制可操作物体的移动 / 旋转

    前言 这篇文章是[Oculus Interaction SDK]系列的一部分,如果发现有对不上的对方,可以回去翻看我之前发布的文章,或在评论区留言.如果文章的内容已经不适用于新版本了,也可以直接联系我 ...

  5. Selenium4.6版本浏览器自动退出问题

    Selenium4.6版本浏览器自动退出问题 代码 from selenium import webdriver driver = webdriver.Chrome() driver.get('htt ...

  6. 使用 LoRA 进行 Stable Diffusion 的高效参数微调

    LoRA: Low-Rank Adaptation of Large Language Models 是微软研究员引入的一项新技术,主要用于处理大模型微调的问题.目前超过数十亿以上参数的具有强能力的大 ...

  7. IDEA手动导入jar包到maven本地库

    第一步:下载需要的jar包 第二步:file project structure-liberaries 第三步:点击+号-选择java,再选择刚才下载的jar包,ok 此时我们把jar包加到项目了,但 ...

  8. 2211-22学习记录之python百分数,time模块

    百分数 print(' {:.0%}'.format(84/100)) 输出为84% 以上百分数输出是使用到了字符串格式化函数format(),在其中将分数42/50作为值给传递了进去.如果将分子分母 ...

  9. Listary 文件搜索工具

    Listary简介 Listary是一款强大的全盘文件搜索.软件启动效率工具,双击Ctrl随时调出搜索框,全盘海量文件毫秒级检索,快速定位打开所需文件.集成右键菜单和诸多自定义动作,适配Windows ...

  10. 给力的Zstack云主机

    合肥光源储存环纵向震荡可视化展示初步结果 前两天做好上面的可视化展示后,想着顺道把那个时间的二维图分析结果给出来吧,就又把纵向震荡的每个束团的频谱和相位顺道可视化显示出来,给计算这些结果的云主机又加点 ...