Vue组件通信中非父子组件传值知识点总结
前言：
如果想要了解非父子关系的组件传值，最好是在了解父传子和子传父的基础上在来了解非父子传值可能会有更透彻的思路。
因为非父子传值是通过定义事件总线来代理实现父传子+子传父从而实现的传值方式。
这是我总结的父子传值相关的知识，可供参考: https://www.jb51.net/article/121806.htm
然后大概回顾一下父子传值的过程:
根据上述信息可知，如果两个组件需要传递值那么需要这两个组件之间是父子关系才能传递数据。
那么如果有这样一个组件，既可以帮你传递数据，又可以帮你接收数据该多好啊？
于是乎，一个叫事件总线的概念出现了，它就可以帮助实现你想要的这些功能。
了解事件总线之前，需要先看下两个重要的方法。
前置知识:
1. $emit(event, data)方法
event: 触发的事件类型
data: 触发这个事件时传递的参数
2. $on(event, callBack(data))方法
event: 绑定的事件类型
callBack: 绑定的这个事件所对应的回调函数，其默认的第一个参数data是使用$emit触发这个事件时所传递的参数
在了解了这两个方法后，再来看下面的这张图：
如果还是不太明白，那就转换成代码在分析一下：
首先，定义一个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"
})
总结：
要想了解非父子传值必先了解父子间的传值非父子传值的核心在于通过事件总线作为一个中介然后通过在“传递值”的组件中触发事件总线的某个自定义的事件来传递一个值(如果是多个值，可以传递一个对象) 最后在“接收值”的组件中来监听事件总线中你触发的那个自定义事件来接收数据
以上就是本次介绍的全部相关知识点，感谢大家的学习和对脚本之家的支持。
相关文章
装饰器是一种与类相关的语法糖,用来包装或者修改类或者类的方法的行为,其实装饰器就是设计模式中装饰者模式的一种实现方式,下面这篇文章主要给大家介绍了关于Vue中使用装饰器的相关资料,需要的朋友可以参考下2022-01-01
toRef 和 toRefs都是Vue3 中的响应式转换工具函数,换句话说,toRef 和 toRefs 就是用来创建响应式的引用的,主要用来取出响应式对象里的属性,或者解构响应式对象,本文小编就来带大家搞清楚Vue3中toRef和toRefs的区别,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了vue watch immediate方法用法详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-06-06
这篇文章主要介绍了vue3中defineComponent 的作用,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-09-09
在Vue进行前端开发中,条件判断主要用于根据不同的条件来决定显示或隐藏,或者进行视图之间的切换,这篇文章主要给大家介绍了关于Vue条件判断之循环举例详解的相关资料,需要的朋友可以参考下2024-07-07
下面小编就为大家分享一篇Vue下的国际化处理方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了Vue 3中常用的生命周期钩子和监听器的操作方法,分析常用的一些生命周期钩子和监听器可以帮助我们在组件中处理数据加载、状态变化和响应式更新,需要的朋友可以参考下2024-07-07
这篇文章主要给大家介绍了关于vue3前端获取文件的绝对路径问题解决的相关资料,文中通过代码示例介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
vue3+ts项目之安装eslint、prettier和sass的详细过程
这篇文章主要介绍了vue3+ts项目02-安装eslint、prettier和sass的详细过程,在本文讲解中需要注意执行yarn format会自动格式化css、js、html、json还有markdown代码，需要的朋友可以参考下2023-10-10
这篇文章主要介绍了VUE div click无效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
最新评论