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 相关文章推荐
高效的表格行背景隔行变色及选定高亮的JS代码
Dec 04 Javascript
JS delegate与live浅析
Dec 21 Javascript
input:checkbox多选框实现单选效果跟radio一样
Jun 16 Javascript
js实现仿QQ秀换装效果的方法
Mar 04 Javascript
JQuery中两个ul标签的li互相移动实现方法
May 18 Javascript
Angular2从搭建环境到开发步骤详解
Oct 17 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
Mar 10 Javascript
dts文件中删除一个node或属性的操作方法
Aug 05 Javascript
JQueryDOM之样式操作
Mar 27 jQuery
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 Javascript
JavaScript WeakMap使用详解
Feb 05 Javascript
手写实现JS中的new
Nov 07 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
强烈推荐:php.ini中文版(2)
2006/10/09 PHP
PHP的分页功能
2007/03/21 PHP
基于php-fpm 参数的深入理解
2013/06/03 PHP
PHP实现清除wordpress里恶意代码
2015/10/21 PHP
PHP 下载文件时如何自动添加bom头及解释BOM头和去掉bom头的方法
2016/01/04 PHP
PHP实现查询两个数组中不同元素的方法
2016/02/23 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
JavaScript开发时的五个注意事项
2007/12/08 Javascript
动态加载脚本提升javascript性能
2014/02/24 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
详解AngularJS脏检查机制及$timeout的妙用
2017/06/19 Javascript
详解VueJs中的V-bind指令
2018/05/03 Javascript
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
Javascript通过控制类名更改样式
2019/05/24 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:奇迹哥卡尔秀翻全场
2017/03/28 DOTA
[01:02:34]TFT vs VGJ.T Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
python实现的简单FTP上传下载文件实例
2015/06/30 Python
Python随手笔记之标准类型内建函数
2015/12/02 Python
Python的消息队列包SnakeMQ使用初探
2016/06/29 Python
Python实现脚本锁功能(同时只能执行一个脚本)
2017/05/10 Python
python正则表达式及使用正则表达式的例子
2018/01/22 Python
numpy中的delete删除数组整行和整列的实例
2018/05/09 Python
pytorch-RNN进行回归曲线预测方式
2020/01/14 Python
pycharm中leetcode插件使用图文详解
2020/12/07 Python
python 基于PYMYSQL使用MYSQL数据库
2020/12/24 Python
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
性能服装:HYLETE
2018/08/14 全球购物
医学院毕业生自荐信
2013/11/08 职场文书
营销计划书范文
2015/01/17 职场文书
2015年感恩母亲节活动方案
2015/05/04 职场文书
大学生村官入党自传
2015/06/26 职场文书
庆七一活动简报
2015/07/20 职场文书
致运动员的广播稿
2015/08/19 职场文书