详解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 相关文章推荐
jquery实现动态菜单的实例代码
Nov 28 Javascript
javascript获取select值的方法分析
Jul 02 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
JS实现图片上传预览功能
Nov 21 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
Jan 20 Javascript
JavaScript函数柯里化原理与用法分析
Mar 31 Javascript
React Native日期时间选择组件的示例代码
Apr 27 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
Jul 05 Javascript
Angular5集成eventbus的示例代码
Jul 19 Javascript
vue.js中导出Excel表格的案例分析
Jun 11 Javascript
微信小程序HTTP接口请求封装代码实例
Sep 05 Javascript
layui默认选中table的CheckBox复选框方法
Sep 19 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获取表单textarea数据中的换行问题
2010/09/10 PHP
php 传值赋值与引用赋值的区别
2010/12/29 PHP
php获取文件后缀的9种方法
2016/03/22 PHP
Javascript 继承机制的实现
2009/08/12 Javascript
JS trim去空格的最佳实践
2011/10/30 Javascript
getComputedStyle与currentStyle获取样式(style/class)
2013/03/19 Javascript
js setTimeout opener的用法示例详解
2013/10/23 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
2014/12/19 Javascript
jQuery+ajax中getJSON() 用法实例
2014/12/22 Javascript
javascript的函数劫持浅析
2016/09/26 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
基于vue的下拉刷新指令和滚动刷新指令
2016/12/23 Javascript
js获取元素下的第一级子元素的方法(推荐)
2017/03/05 Javascript
纯JS实现弹性导航条效果
2017/03/06 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
BootStrap 页签切换失效的解决方法
2017/08/17 Javascript
vue2.0之多页面的开发的示例
2018/01/30 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
2020/01/18 Javascript
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
python 给DataFrame增加index行名和columns列名的实现方法
2018/06/08 Python
python 利用文件锁单例执行脚本的方法
2019/02/19 Python
使用Python实现毫秒级抢单功能
2019/06/06 Python
Python跳出多重循环的方法示例
2019/07/03 Python
python 采用paramiko 远程执行命令及报错解决
2019/10/21 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
Python3操作MongoDB增册改查等方法详解
2020/02/10 Python
Python多线程操作之互斥锁、递归锁、信号量、事件实例详解
2020/03/24 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
美国波西米亚风格精品店:South Moon Under
2019/10/26 全球购物
Why we need EJB
2016/10/20 面试题
酒吧创业计划书
2014/01/18 职场文书
2016年党员创先争优公开承诺书
2016/03/25 职场文书
2019年警察入党转正申请书最新范文
2019/09/03 职场文书
CSS Transition通过改变Height实现展开收起元素
2021/08/07 HTML / CSS