详解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 相关文章推荐
js获取当前select 元素值的代码
Apr 19 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 Javascript
jQuery插件MixItUp实现动画过滤和排序
Apr 12 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 Javascript
跟我学习javascript的作用域与作用域链
Nov 19 Javascript
学习JavaScript设计模式(单例模式)
Nov 26 Javascript
基于Jquery插件实现跨域异步上传文件功能
Apr 26 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
Nov 10 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
Sep 27 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
Jul 26 Javascript
7个好用的JavaScript技巧分享(译)
May 07 Javascript
vue基于Teleport实现Modal组件
May 31 Vue.js
微信小程序 支付功能(前端)的实现
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
Terran建筑一览
2020/03/14 星际争霸
ajax实现无刷新分页(php)
2010/07/18 PHP
php函数实现判断是否移动端访问
2015/03/03 PHP
php生成带logo二维码方法小结
2016/04/08 PHP
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
PHP中-&gt;和=&gt;的含义及使用示例解析
2020/08/06 PHP
优化网页之快速的呈现我们的网页
2007/06/29 Javascript
解javascript 混淆加密收藏
2009/01/16 Javascript
javascript replace()正则替换实现代码
2010/02/26 Javascript
Js获取下拉框选定项的值和文本的实现代码
2014/02/26 Javascript
javascript实现获取服务器时间
2015/05/19 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
Ajax跨域实现代码(后台jsp)
2017/01/21 Javascript
jquery uploadify如何取消已上传成功文件
2017/02/08 Javascript
javascript设计模式之单体模式学习笔记
2017/02/15 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
2019/05/05 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
2019/06/27 Javascript
vue+element tabs选项卡分页效果
2020/06/29 Javascript
详解python 发送邮件实例代码
2016/12/22 Python
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
如何在python字符串中输入纯粹的{}
2018/08/22 Python
Python pyinotify模块实现对文档的实时监控功能方法
2018/10/13 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
python使用正则筛选信用卡
2019/01/27 Python
python自动循环定时开关机(非重启)测试
2019/08/26 Python
荷兰男士时尚网上商店:Suitable
2017/12/25 全球购物
社区先进事迹材料
2014/05/19 职场文书
单位工作证明
2014/10/07 职场文书
干部作风建设心得体会
2014/10/22 职场文书
大学生逃课检讨书
2015/05/04 职场文书
追悼会家属答谢词
2015/09/29 职场文书
详解Java线程池是如何重复利用空闲线程的
2021/06/26 Java/Android
win10滚动条自动往上跑怎么办?win10滚动条自动往上跑的解决方法
2022/08/05 数码科技