参考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. python 动态指定header获取网页源代码的函数

    import random import requests def get_htmla(url): aui=0 while aui==0: try: header={'User-Agent':'Moz ...

  2. [007] - JavaSE面试题(七):异常

    第一期:Java面试 - 100题,梳理各大网站优秀面试题.大家可以跟着我一起来刷刷Java理论知识 [007] - JavaSE面试题(七):异常 第1问:Error和Exception的区别? E ...

  3. java并发编程基础——线程池

    线程池 由于启动一个线程要与操作系统交互,所以系统启动一个新的线程的成本是比较高的.在这种情况下,使用线程池可以很好的提升性能,特别是程序中涉及创建大量生命周期很短暂的线程时. 与数据库连接池类似,线 ...

  4. Python+Requests+Re(正则)爬取某糗事百科图片(数据分析一)

    1.博客目前在学习爬虫课程,使用正则表达式来爬取网页的图片信息 2.下面我们一起来回归下Python中的正则使用方式/方法 3.糗事百科图片爬取源码如下: import requestsimport ...

  5. Python_结合Re正则模块爬虫

    ##### 爬取古诗文import reimport requestsdef parse_page(url): headers = { 'User-Agent':'Mozilla/5.0 (Windo ...

  6. 解决clipboard.js在移动端复制失败的问题

    1.前沿 在项目中使用clipboard.js插件去实现点击按钮,复制一段网址到剪切板的功能.功能做好后,一开始无论这pc端还是移动端都能正常使用.突然某一天测出了一个bug:移动端复制失败,pc端是 ...

  7. Lesson2 Thirteen equals one

    ​ Lesson2 Thirteen equals one equal ['i:kwəl] v. 等于 He equaled the world record. Nobody equals him i ...

  8. 新iPhone有望加入指纹解锁,你会买吗?

    苹果新款iPhone即将在9月份正式发布,或命名为iPhone 13或者iPhone 12s.据外媒报道,新一代iPhone的屏幕和相机都将迎来重大升级,同时还将首次加入屏下指纹解锁技术.你期待吗? ...

  9. 网络损伤仪WANsim中关于丢包的介绍

    网络损伤仪WANsim中的4种丢包模型 丢包是指在网络上传输的数据包无法到达指定目的地.丢包在广域网中是一个很常见的问题.想要模拟出真实的广域网环境,对丢包的精确模拟是必不可少的. 在网络损伤仪WAN ...

  10. [HAOI2012]外星人 题解

    人类智慧题. 首先,只有 \(\varphi(1)=\varphi(2)=1\).再考虑题目中给的提示: \[\varphi\left(\prod_{i = 1}^m p_i^{q_i}\right) ...