在npm Vue单页面的环境下,兄弟组件之间通信Bus
参考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的更多相关文章
- vue工程利用pubsub-js实现兄弟组件之间的通信
前言 项目是基于vue-cli创建的,不会搭建vue开发环境的同学可以百度,这里不再赘述. 步骤流程 vue项目搭建完成之后的文件图如下: 我的上一篇博客已经详细叙述vue工程中各个文件的作用,不清楚 ...
- Vue 组件之间通信 All in One
Vue 组件之间通信 All in One 组件间通信 1. 父子组件之间通信 https://stackblitz.com/edit/vue-parent-child-commutation?fil ...
- 在不使用ssr的情况下解决Vue单页面SEO问题
遇到的问题: 近来在写个人博客的时候遇到了大家可能都会遇到的问题 Vue单页面在SEO时显得很无力,尤其是百度不会抓取动态脚本 Vue-Router配合前后端分离无法让meta标签在蜘蛛抓取时动态填充 ...
- 优化单页面开发环境:webpack与react的运行时打包与热更新
前面两篇文章介绍初步搭建单页面应用的开发环境: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-router实现单页面应用路由 这 ...
- 关于处理移动端Vue单页面及其内嵌兼容问题
关于处理移动端Vue单页面及其内嵌兼容问题 question:由于最近转移了以前的H5项目,重构使用Vue单页面,导致部分手机内嵌或在微信浏览器中无法浏览,或者无法使用ajax请求:手机机型千变万化, ...
- vue单页面应用中动态修改title
https://www.jianshu.com/p/b980725b62e8 https://www.npmjs.com/package/vue-wechat-title 详细信息查看:vue-wea ...
- 处理 Vue 单页面应用 SEO 的另一种思路
vue-meta-info 官方地址: monkeyWangs/vue-meta-info (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plu ...
- vue单页面打包文件大?首次加载慢?按需加载?是你打开方式不对
部署各vue项目,走了一遍坑.... vue单页面应用刷新404 找到nginx多网站配置文件:类似nginx/sites-available/www.baidu.com server { liste ...
- [转] 2017-11-20 发布 另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新
目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...
随机推荐
- Antilibrary能拯救稍后不读吗
从「稍后再读」到「再也不读」 上学时,我有一套自认为很高效的资料搜集工作流.大致流程是浏览到感兴趣或可能有用的信息时,粗略扫过一眼后即用 Pocket 将其保存为稍后再读,随后借助 IFTTT 的某个 ...
- mysql 按照年统计数据并存到新表中
参考:https://blog.csdn.net/u013201439/article/details/78116575 CREATE TABLE count_year SELECT YEAR(req ...
- SpringBoot总结之属性配置
一.SpringBoot简介 SpringBoot是spring团队提供的全新框架,主要目的是抛弃传统Spring应用繁琐的配置,该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配 ...
- CRUD搬砖两三年了,怎么阅读Spring源码?
作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 连读同事写的代码都费劲,还读Spring? 咋的,Spring 很难读! 这个与我们码农朝夕 ...
- Leetcode 春季打卡活动 第一题:225. 用队列实现栈
Leetcode 春季打卡活动 第一题:225. 用队列实现栈 Leetcode 春季打卡活动 第一题:225. 用队列实现栈 解题思路 这里用了非常简单的思路,就是在push函数上做点操作,让队头总 ...
- Cannot read property 'data' of undefined —— 小程序开发
由于疫情原因目前处于半下岗状态,在家的时候就研究起了小程序开发.由于是新手,所以总会遇到各种问题,顺便记录一下. wx.showModal({ title: '提示', content: '这是一个模 ...
- atom之插件安装及相关
1. simplified-chinese-menu 汉化软件 2. file-icons 加上文件图标 3. language-vue 加上vue语言支持 4. platformio-ide-ter ...
- thinkphp 事物回滚
1 $m=D('YourModel');//或者是M(); 2 $m2=D('YouModel2'); 3 $m->startTrans();//在第一个模型里启用就可以了,或者第二个也行 4 ...
- ListPopupWindow和Popupwindow的阴影相关问题demo总结
Popupwindow: 优点:可以通过setBackgroundDrawable()来重新设置阴影. 缺点:当AnchorView是可移动的,比如移动到屏幕的左右边界.左下角.右下角时,Popupw ...
- 打造自己的Vue组件文档生成工具
程序员最讨厌的两件事情,第一种是写文档,另一种是别人没有写文档.有没有直接根据vue组件生成文档的呢?当然是有的的.但第三方使用起来不一定能和现有项目结合使用,往往需要额外的注释用来标记提取信息.使用 ...