Vue组件通信中非父子组件传值知识点总结


Posted in Javascript onDecember 05, 2019

前言:

如果想要了解非父子关系的组件传值,最好是在了解父传子和子传父的基础上在来了解非父子传值可能会有更透彻的思路。

因为非父子传值是通过定义事件总线来代理实现父传子+子传父从而实现的传值方式。

这是我总结的父子传值相关的知识,可供参考:  https://3water.com/article/121806.htm

然后大概回顾一下父子传值的过程:

Vue组件通信中非父子组件传值知识点总结

根据上述信息可知,如果两个组件需要传递值那么需要这两个组件之间是父子关系才能传递数据。

那么如果有这样一个组件,既可以帮你传递数据,又可以帮你接收数据该多好啊?

于是乎,一个叫事件总线的概念出现了,它就可以帮助实现你想要的这些功能。

了解事件总线之前,需要先看下两个重要的方法。

前置知识: 

1. $emit(event, data)方法

event: 触发的事件类型

data: 触发这个事件时传递的参数

2. $on(event, callBack(data))方法

event: 绑定的事件类型

callBack: 绑定的这个事件所对应的回调函数,其默认的第一个参数data是使用$emit触发这个事件时所传递的参数

在了解了这两个方法后,再来看下面的这张图:

Vue组件通信中非父子组件传值知识点总结

如果还是不太明白,那就转换成代码在分析一下:

首先,定义一个eventBus: 

// eventBus.js 
// 事件总线: 只需要导出一个Vue实例即可
import Vue from 'vue'
export default new Vue()

然后,在A组件中导入eventBus, 并触发自定义的AtoB事件

// A.vue// 导入eventBus
import eventBus from "./eventBus"

// 触发事件并传递参数
eventBus.$emit("AtoB", "Data_A")

最后,在B组件中导入eventBus,并监听自定义的AtoB事件

// B.vue// 导入eventBus
import eventBus from "./eventBus"

// 触发事件并传递参数
eventBus.$on("AtoB", data =>{
  console.log(data); // "Data_A" 
})

总结:

要想了解非父子传值必先了解父子间的传值非父子传值的核心在于通过事件总线作为一个中介然后通过在“传递值”的组件中触发事件总线的某个自定义的事件来传递一个值(如果是多个值,可以传递一个对象) 最后在“接收值”的组件中来监听事件总线中你触发的那个自定义事件来接收数据

以上就是本次介绍的全部相关知识点,感谢大家的学习和对三水点靠木的支持。

Javascript 相关文章推荐
javascript中有趣的反柯里化深入分析
Dec 05 Javascript
仿百度的关键词匹配搜索示例
Sep 25 Javascript
javascript实现的右下角弹窗实例
Apr 24 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
Apr 17 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
May 27 Javascript
Javascript中判断一个值是否为undefined的方法详解
Sep 28 Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
VUE路由动态加载实例代码讲解
Aug 26 Javascript
TypeScript之调用栈的实现
Dec 31 Javascript
在pycharm中开发vue的方法步骤
Mar 04 Javascript
Vue实现PC端靠边悬浮球的代码
May 09 Javascript
js cavans实现静态滚动弹幕
May 21 Javascript
基于javascript实现贪吃蛇经典小游戏
Apr 10 #Javascript
微信小程序登录时如何获取input框中的内容
Dec 04 #Javascript
微信小程序日历插件代码实例
Dec 04 #Javascript
微信小程序request请求封装,验签代码实例
Dec 04 #Javascript
vue中使用极验验证码的方法(附demo)
Dec 04 #Javascript
基于vue-cli3创建libs库的实现方法
Dec 04 #Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
Dec 04 #Javascript
You might like
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
PHP 出现乱码和Sessions验证问题的解决方法!
2008/12/06 PHP
php checkbox 取值详细说明
2010/08/19 PHP
PHP编码转换
2012/11/05 PHP
PHP框架性能测试报告
2016/05/08 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
PHP实现的MD5结合RSA签名算法实例
2017/10/07 PHP
PHP切割整数工具类似微信红包金额分配的思路详解
2019/09/18 PHP
var与Javascript变量隐式声明
2009/09/17 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
jquery获取复选框被选中的值
2014/04/10 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
js实现跨域的多种方法
2015/12/25 Javascript
详解js中==与===的区别
2017/01/08 Javascript
AngularJS的脏检查深入分析
2017/04/22 Javascript
通过命令行创建vue项目的方法
2017/07/20 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
[01:30:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第二场 2月2日
2021/03/11 DOTA
python语言中with as的用法使用详解
2018/02/23 Python
pandas按若干个列的组合条件筛选数据的方法
2018/04/11 Python
python实现石头剪刀布小游戏
2021/01/20 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
PYQT5 vscode联合操作qtdesigner的方法
2020/03/24 Python
使用python从三个角度解决josephus问题的方法
2020/03/27 Python
Oroton中国官网:澳洲知名奢侈配饰品牌
2017/03/26 全球购物
医学护理系毕业生求职信
2013/10/01 职场文书
绿化先进工作者事迹材料
2014/01/30 职场文书
安全协议书
2014/04/23 职场文书
竞选卫生委员演讲稿
2014/04/28 职场文书
端午节寄语2015
2015/03/23 职场文书
本科毕业论文致谢词
2015/05/14 职场文书
管辖权异议上诉状
2015/05/23 职场文书
《飘》英文读后感五篇
2019/10/11 职场文书
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis
python字符串拼接.join()和拆分.split()详解
2021/11/23 Python