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 相关文章推荐
JQuery UI皮肤定制
Jul 27 Javascript
jQuery中bind与live的用法及区别小结
Jan 27 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
May 14 Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 Javascript
jquery mobile 移动web(5)
Dec 20 Javascript
javascript动态获取登录时间和在线时长
Feb 25 Javascript
js简单倒计时实现代码
Apr 30 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
May 15 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
Nov 11 Javascript
js实现延迟加载的几种方法
Apr 24 Javascript
vuejs前后端数据交互之从后端请求数据的实例
Aug 11 Javascript
js实现滚动条自动滚动
Dec 13 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
索尼SONY ICF-SW7600GR电路分析与改良
2021/03/02 无线电
模拟SQLSERVER的两个函数:dateadd(),datediff()
2006/10/09 PHP
PHP5各个版本的新功能和新特性总结
2014/03/16 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
CentOS下与Apache连接的PHP多版本共存方案实现详解
2015/12/19 PHP
php基于dom实现的图书xml格式数据示例
2017/02/03 PHP
PHP实现简易计算器功能
2020/08/28 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
Prototype 学习 Prototype对象
2009/07/12 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
2013/04/15 Javascript
编写简单的jQuery提示插件
2014/12/21 Javascript
后台获取ZTREE选中节点的方法
2015/02/12 Javascript
jQuery的each循环用法简单示例
2016/06/12 Javascript
jQuery如何获取动态添加的元素
2016/06/24 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
javascript数组去重常用方法实例分析
2017/04/11 Javascript
windows下vue-cli导入bootstrap样式
2017/04/25 Javascript
ajax +NodeJS 实现图片上传实例
2017/06/06 NodeJs
javascript深拷贝、浅拷贝和循环引用深入理解
2018/05/27 Javascript
JavaScript使用setTimeout实现倒计时效果
2021/02/19 Javascript
详解python中的文件与目录操作
2017/07/11 Python
python实现xlsx文件分析详解
2018/01/02 Python
python学生信息管理系统
2018/03/13 Python
python占位符输入方式实例
2019/05/27 Python
PyCharm专业最新版2019.1安装步骤(含激活码)
2019/10/09 Python
关于Numpy中的行向量和列向量详解
2019/11/30 Python
python如何实现不可变字典inmutabledict
2020/01/08 Python
python dict如何定义
2020/09/02 Python
在python3.9下如何安装scrapy的方法
2021/02/03 Python
使用css3和jquery实现可伸缩搜索框
2014/02/12 HTML / CSS
小学运动会广播稿200字(十二篇)
2014/01/14 职场文书
关于国庆节的广播稿
2015/08/19 职场文书
Java如何实现树的同构?
2021/06/22 Java/Android
Android Studio 计算器开发
2022/05/20 Java/Android
Java 多线程并发FutureTask
2022/06/28 Java/Android