在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请求,向服务器获取数据.不刷新特指当进入此 ...
随机推荐
- 「AGC034E」 Complete Compress
「AGC034E」 Complete Compress 显然可以枚举根. 然后把某两棵棋子同时往深度浅的方向提,即对不存在祖先关系的两个棋子进行操作. 如果能到达那么就更新答案. 问题转化为如何判定能 ...
- CTF-Decrypt-the-Message-writeup
Decrypt-the-Message 题目信息: 解密这段信息! 附件: The life that I have Is all that I have And the life that I ha ...
- SpringMVC架构(一)
SpringMVC架构 1.1Spring web mvc介绍 Spring web mvc和Struts2都属于表现层的框架,它是Spring框架的一部分,我们可以从Spring的整体结构中看得出来 ...
- 高校表白App-团队冲刺第三天
今天要做什么 今天开站立会议的时候,忽然发觉在一个完整的App上好像是有一些引导页的,比如说在第一次使用App的时候,或者是在使用App的时候会出现新手指引操作. 做了什么 通过查阅资料来学习View ...
- 【翻译】拟合与高斯分布 [Curve fitting and the Gaussian distribution]
参考与前言 英文原版 Original English Version:https://fabiandablander.com/r/Curve-Fitting-Gaussian.html 如何通俗易懂 ...
- Junit测试用例配置Log4j
用Junit测试非常方便,但有时我们想要看日志来方便排除,使用spring+log4j时,用Junit测试看日志很多人都不太会,即如何将Junit与log4j进行整合. 我也是研究了半天,才终于找到了 ...
- JavaScript学习笔记:你必须要懂的原生JS(二)
11.如何正确地判断this?箭头函数的this是什么? this是 JavaScript 语言的一个关键字.它是函数运行时,在函数体内部自动生成的一个对象,只能在函数体内部使用. this的绑定规则 ...
- Leetcode2.两数相加——简洁易懂
> 简洁易懂讲清原理,讲不清你来打我~ 输入两个链表,相同位置相加,进位给下一个位置,输出相加后的链表
该篇内容承接CentOS下 Django部署 uWSGI+Django(一),细节流程可参考此篇内容. 1. 当前系统 CentOS Linux release 7.6.1810 Python 2.7 ...
- 线程Thread中的方法详解(二)
1.start() start()方法的作用讲得直白点就是通知"线程规划器",此线程可以运行了,正在等待CPU调用线程对象得run()方法,产生一个异步执行的效果.通过start( ...