详解Vue 非父子组件通信方法(非Vuex)


Posted in Javascript onMay 24, 2017

一提到两个非父子组件通信方法,有经验的 coder 肯定会说用 Vuex 啊,我个人建议不要为了用 Vuex 而用 Vuex,除非你的项目很大,耦合度很高,需要大量的储存一些 data,组件之间通信频繁。当然还是要根据自己的业务场景的来决定,总之还是那句话,不要为了用 Vuex 而用 Vuex!

Vue 官网介绍了非父子组件通信方法:

详解Vue 非父子组件通信方法(非Vuex)

不过官网说的太简单了,新手看完估计还是一脸懵逼。还有这个空的 Vue 实例放到哪里合适也值得商榷。

这篇文章的目的就是用一个简单的例子让你明白如何用 Bus ? 来进行通信:

详解Vue 非父子组件通信方法(非Vuex)

假设 bb 组件里面有个按钮,点击按钮,把 123 传递给 aa 组件

// 根组件(this.$root)
new Vue({
 el: '#app',
 router,
 render: h => h(App),
 data: {
  // 空的实例放到根组件下,所有的子组件都能调用
  Bus: new Vue()
 }
})

bb 组件内调用事件触发↓

<button @click="submit">提交<button>

methods: {
  submit() {
   // 事件名字自定义,用不同的名字区别事件
   this.$root.Bus.$emit('eventName', 123)
  }
 }

aa 组件内调用事件接收↓

// 当前实例创建完成就监听这个事件
 created(){
  this.$root.Bus.$on('eventName', value => {
   this.print(value)
  })
 },

 methods: {
  print(value) {
   console.log(value)
  }
 },

 // 在组件销毁时别忘了解除事件绑定
 beforeDestroy() {
   this.$root.Bus.$off('eventName')
 },

这样就可以了,是不是很简单?

问题一:如果有多个组件组件需要通信,是不是要在根组件上多建几个 Bus?
答:不需要的,只要保证事件名 (eventName)不一样就行了。

问题二:为什么要弄个 Bus?直接 this.$root.$on、this.$root.$emit 不更简单粗暴?

答:按照文档上的说法是专门用一个空的 Vue 实例(Bus)来做中央事件总线更加清晰也易于管理。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript跟随滚动效果插件代码(javascript Follow Plugin)
Aug 03 Javascript
了不起的node.js读书笔记之mongodb数据库交互
Dec 22 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
Dec 22 Javascript
jquery+CSS3实现3D拖拽相册效果
Jul 18 Javascript
jQuery EasyUI ProgressBar进度条组件
Feb 28 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
Mar 03 Javascript
gulp解决跨域的配置文件问题
Jun 08 Javascript
react-native-fs实现文件下载、文本存储的示例代码
Sep 22 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 Javascript
基于vue中解决v-for使用报红并出现警告的问题
Mar 03 Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 Javascript
Node.js文本文件BOM头的去除方法
Nov 22 Javascript
微信小程序 支付功能(前端)的实现
May 24 #Javascript
微信小程序 选项卡的简单实例
May 24 #Javascript
JS回调函数基本定义与用法实例分析
May 24 #Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 #jQuery
详解前后端分离之VueJS前端
May 24 #Javascript
JQuery Ajax 异步操作之动态添加节点功能
May 24 #jQuery
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
May 24 #Javascript
You might like
PHP MemCached 高级缓存应用代码
2010/08/05 PHP
PHP数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
深入解析PHP的引用计数机制
2013/06/14 PHP
PHP5.5和之前的版本empty函数的不同之处
2014/06/13 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
php使用crypt()函数进行加密
2017/06/08 PHP
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
给应用部分的js代码设定一个统一的入口
2014/06/15 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
vue用BMap百度地图实现即时搜索功能
2019/09/26 Javascript
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
Python中List.index()方法的使用教程
2015/05/20 Python
python版简单工厂模式
2017/10/16 Python
Python 判断是否为质数或素数的实例
2017/10/30 Python
Python实现的归并排序算法示例
2017/11/21 Python
python如何实现内容写在图片上
2018/03/23 Python
python实现简单加密解密机制
2019/03/19 Python
python爬虫增加访问量的方法
2019/08/22 Python
pytorch标签转onehot形式实例
2020/01/02 Python
五分钟带你搞懂python 迭代器与生成器
2020/08/30 Python
阿根廷旅游网站:almundo阿根廷
2018/02/12 全球购物
文科教师毕业的自我评价
2014/01/16 职场文书
商场促销活动方案
2014/02/08 职场文书
学校爱心捐款倡议书
2014/05/13 职场文书
2014年反洗钱工作总结
2014/11/22 职场文书
求职自荐信范文(优秀篇)
2015/03/27 职场文书
廉政承诺书范文
2015/04/28 职场文书
青年志愿者服务活动总结
2015/05/06 职场文书
杨善洲观后感
2015/06/04 职场文书
2015年社区重阳节活动总结
2015/07/30 职场文书
关爱空巢老人感想
2015/08/11 职场文书
2016年学生会感恩节活动总结
2016/04/01 职场文书
Nginx图片服务器配置之后图片访问404的问题解决
2022/03/21 Servers