参考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. Selenium自动化测试框架Ride使用XLRD对于Excel测试数据的管理和操作

      Python操作excel主要用到xlrd和xlwt这两个库,即xlrd是读excel,xlwt是写excel的库. 一.安装xlrd模块 到python官网下载http://pypi.pytho ...

  2. 创建自己的RSA密钥来保护web.config 加密数据库连接字符串

    通过创建自己的RSA密钥来保护web.config1创建RSA密钥:C:\Windows\Microsoft.NET\Framework64\v4.0.30319>aspnet_regiis - ...

  3. navicate for mysql命令中输入中文报错

    insert into xsxx(name,xb) values('李四','男') 错误提示: [SQL]insert into xsxx3(name,xb) values('李四','男') [E ...

  4. 高校表白App-团队冲刺第二天

    今天要做什么 今天要把昨天的activity进行完善,并且加上计时跳转的功能,将其设置为主页面,设置两种跳转功能. 遇到的问题 今天没遇到什么大的问题,只是在进行编写的时候,又出现了R文件无法找到的情 ...

  5. 标准化R包开发流程

    3个武器: devtools:各种开发小工具的合集,让开发变得简单,非常实用 roxygens:通过注释的方式,生成文档,远离LaTex的烦恼 testthat:单元测试,让R包稳定.健壮.减少升级的 ...

  6. [IOI2005]mea

    IOI 读完题,感觉这个题并不是很难,那我是不是可以去IOI了: 最先考虑暴力,发现完全行不通,所以,我们考虑其他方法.突然发现:其实在确定 \(s_1\) 的时候,整个序列就可以确定了,所以我们考虑 ...

  7. 第二十二篇 -- 事件与信号(自定义label信号的双击功能)

    在第六篇中已经学习过了自定义信号的相关内容了,那一篇中讲的是自定义类中的自定义信号,类和信号都是自己定义的.那么今天想要学习的是事件处理和信号的关系.如同Label标签,它本身有很多的信号,但是它没有 ...

  8. 一个完整的socket recv()案例,包括解决粘包、服务器主动推数据的问题

    前言: 本文是针对socket长连接(涉及到服务器主动推数据),每个包头的拼接算法和长度都不一样,具体的包头小伙伴们问自己公司的开发吧,本文只是提供思路.再啰嗦一句:recv到的包头中数字进行某种运算 ...

  9. 最短路径问题 Dijkstra ——Python实现

      # 最短路径算法 Dijkstra # 输入:含权有向图 G=(V,E),V={1,2,3...n} # 输出:G中顶点 1 到各个顶点地最短距离   Dijkstra算法各点权值变化情况: 1 ...

  10. PySpider爬取去哪儿攻略数据项目

    1 创建项目 点击WEB中的Create创建项目 填入相关项目名和其实爬取URL 创建后进入项目首页 右边 Handler 是pyspider的主类,整个爬虫一个Handler,其中可定义爬虫的爬取. ...