参考1:https://www.cnblogs.com/wangruifang/p/7772631.html

参考2:https://www.jianshu.com/p/b3d09c6c87bf

在main.js中引入

//中央事件总线 bus
Vue.prototype.bus = new Vue();

在App.vue中引入2个组件

兄弟组件1:Veaflet.vue

<script>
export default {
mounted() {
var that = this;
this.bus.$on("msgToVeaflet",function(msg){
alert("自定义的事件触发,接收到的数据"+msg);
});
}
}
</script>

兄弟组件2:containerLeft.vue

<template>
<button @click="sendToVeaflet">Click Me</button>
</template> <script>
export default {
methods:{
sendToVeaflet(){
this.bus.$emit('msgToVeaflet','666');
}
}
}
</script> 将消息666,发送到组件1

在npm Vue单页面的环境下,兄弟组件之间通信Bus的更多相关文章

  1. vue工程利用pubsub-js实现兄弟组件之间的通信

    前言 项目是基于vue-cli创建的,不会搭建vue开发环境的同学可以百度,这里不再赘述. 步骤流程 vue项目搭建完成之后的文件图如下: 我的上一篇博客已经详细叙述vue工程中各个文件的作用,不清楚 ...

  2. Vue 组件之间通信 All in One

    Vue 组件之间通信 All in One 组件间通信 1. 父子组件之间通信 https://stackblitz.com/edit/vue-parent-child-commutation?fil ...

  3. 在不使用ssr的情况下解决Vue单页面SEO问题

    遇到的问题: 近来在写个人博客的时候遇到了大家可能都会遇到的问题 Vue单页面在SEO时显得很无力,尤其是百度不会抓取动态脚本 Vue-Router配合前后端分离无法让meta标签在蜘蛛抓取时动态填充 ...

  4. 优化单页面开发环境:webpack与react的运行时打包与热更新

    前面两篇文章介绍初步搭建单页面应用的开发环境: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-router实现单页面应用路由 这 ...

  5. 关于处理移动端Vue单页面及其内嵌兼容问题

    关于处理移动端Vue单页面及其内嵌兼容问题 question:由于最近转移了以前的H5项目,重构使用Vue单页面,导致部分手机内嵌或在微信浏览器中无法浏览,或者无法使用ajax请求:手机机型千变万化, ...

  6. vue单页面应用中动态修改title

    https://www.jianshu.com/p/b980725b62e8 https://www.npmjs.com/package/vue-wechat-title 详细信息查看:vue-wea ...

  7. 处理 Vue 单页面应用 SEO 的另一种思路

    vue-meta-info 官方地址: monkeyWangs/vue-meta-info (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plu ...

  8. vue单页面打包文件大?首次加载慢?按需加载?是你打开方式不对

    部署各vue项目,走了一遍坑.... vue单页面应用刷新404 找到nginx多网站配置文件:类似nginx/sites-available/www.baidu.com server { liste ...

  9. [转] 2017-11-20 发布 另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新

    目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...

随机推荐

  1. CTF-Decrypt-the-Message-writeup

    Decrypt-the-Message 题目信息: 解密这段信息! 附件: The life that I have Is all that I have And the life that I ha ...

  2. VisualEffectGraph基础操作 --创建VEG项目步骤讲解

    一:建立VEG项目步骤 首先打开Unity Hub,  使用unity2020.1 新建项目(本技术博客,默认使用unity2020.1 版本演示),选择HDRP 高清渲染管线,确定项目目录与名称. ...

  3. MQTT 1——物联网集成项目技术选型与说明

    最近做的JAVA项目与物联网设备有集成,记录一下从技术选型到实现,整合: 1.通信协议技术选型,MQTT技术介绍2.MQTT服务端安装,客户端测试3.MQTT客户端与Spring MVC整合 1.项目 ...

  4. 一张图概括mysql的各种join用法

  5. POJ4007 Flood-it! 题解

    调得我快死了啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊!!!! 先自己写了几发,老是 T,然后去看题解,大体思路居然都差不多,估计是自己写挂了orz. 几乎所有题解都有个vis数组,真 nm 看不懂到底是什么意思 ...

  6. 基于BIT数组实现全局功能开关

    前提 某一天巧合打开了sofa-bolt项目,查找部分源码,看到了项目中使用bit数组实现功能开关的特性,感觉这种方式可以借鉴,于是写下这篇文章. 原理 bit数组的布局如下: 由于每个bit都可以表 ...

  7. intouch制作历史报警查询(时间查询,筛选关键字)

    在项目中,intouch制作历史报警查询已属于标配功能,如何做出按时间以及关键字来进行综合查询,提高历史报警查询效率仍然是一个值得研究的问题,接下来参考网上文章自己总结下如何制作. 1.DTPicke ...

  8. 如何获取SQL Server数据库连接字符串的某些部分

    有的时候需要获取SQL Server数据库连接字符串的某些部分.用正则表达式可能有点麻烦. 其实有一个比较简单的方法--使用SqlConnectionStringBuilder. var builde ...

  9. npm命令,nrm命令,n命令, nvm命令

    npm命令 npm/yarn config set registry https://registry.npm.taobao.org 设置淘宝镜像npm/yarn config get registr ...

  10. 微信小程序 -- 英语词典 (小程序插件)

    英语词典小程序 基于英语词典小程序插件 - 提供开源地址 项目地址 英语词典小程序插件: 微信小程序 词典 真题基础服务插件(gitee.com) 功能特色 [x] 全面详实的经典词库,详细释义覆盖约 ...