详解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的实现原理的模拟代码 -1 核心部分
Aug 01 Javascript
js中opener与parent的区别详细解析
Jan 14 Javascript
javascript避免数字计算精度误差的方法详解
Mar 05 Javascript
浅谈javascript中createElement事件
Dec 05 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
Dec 31 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
Jul 01 Javascript
AngularJS基础 ng-open 指令简单实例
Aug 02 Javascript
js实现旋转木马效果
Mar 17 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
Dec 07 Javascript
vue实现重置表单信息为空的方法
Sep 29 Javascript
javascript 模块依赖管理的本质深入详解
Apr 30 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
在PHP3中实现SESSION的功能(三)
2006/10/09 PHP
Codeigniter实现智能裁剪图片的方法
2014/06/12 PHP
windows server 2008/2012安装php iis7 mysql环境搭建教程
2016/06/30 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
2017/04/03 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
2006/12/06 Javascript
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
js对象继承之原型链继承实例
2015/01/10 Javascript
JS实现当前页居中分页效果的方法
2015/06/18 Javascript
JS实现三个层重叠点击互相切换的方法
2015/10/06 Javascript
基于jQuery实现仿百度首页选项卡切换效果
2016/05/29 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
2016/12/26 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
2018/01/04 Javascript
360doc网站不登录就无法复制内容的解决方法
2018/01/27 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
原生JS实现获取及修改CSS样式的方法
2018/09/04 Javascript
基于vue.js组件实现分页效果
2018/12/29 Javascript
webpack常用构建优化策略小结
2019/11/21 Javascript
利用Python脚本实现ping百度和google的方法
2017/01/24 Python
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
Python实现简单石头剪刀布游戏
2021/01/20 Python
python自动化之Ansible的安装教程
2019/06/13 Python
jupyter 使用Pillow包显示图像时inline显示方式
2020/04/24 Python
利用Python如何画一颗心、小人发射爱心
2021/02/21 Python
HTML5实现直播间评论滚动效果的代码
2020/05/27 HTML / CSS
KIKO MILANO西班牙官网:意大利领先的化妆品和护肤品品牌
2019/05/03 全球购物
北京某公司的.net笔试题
2014/03/20 面试题
中科方德软件测试面试题
2016/04/21 面试题
临床医师专业个人自我评价范文
2013/11/07 职场文书
篝火晚会策划方案
2014/05/16 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书
MySQL 常见存储引擎的优劣
2021/06/02 MySQL
Python3中最常用的5种线程锁实例总结
2021/07/07 Python
Node-Red实现MySQL数据库连接的方法
2021/08/07 MySQL