Vue非父子组件之间的通信

最新推荐文章于 2024-05-24 10:01:36 发布
最新推荐文章于 2024-05-24 10:01:36 发布
阅读量254 收藏
点赞数
分类专栏： 面试 学习路线 阿里巴巴 文章标签： android 前端 后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/segegefe/article/details/126080443
版权

文章目录

非父子组件的通信

此篇讲解的是, 在学习状态管理之前, 非父子间通信的方案

在开发中，我们构建了组件树之后，除了父子组件之间的通信之外，还会有非父子组件之间的通信。

这里我们主要讲两种方式：

  • Provide/Inject；

  • 全局事件总线；

1.Provide和Inject

1.1基本使用

Provide/Inject用于非父子组件之间共享数据：

  • 比如有一些深度嵌套的组件，子组件想要获取父组件的部分内容；
  • 在这种情况下，如果我们仍然将props沿着组件链逐级传递下去，
最低0.47元/天 解锁文章
segegefe
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序基本使用流程
H_jrqn的博客
11-07 2823
微信小程序基本使用流程
vue非父子组件通信
ioncannontic的博客
06-01 139
非父子组件通信
推荐使用：hy-event-store - 全局状态管理新星！
最新发布
gitblog_00044的博客
05-24 334
推荐使用：hy-event-store - 全局状态管理新星！ 项目地址:https://gitcode.com/coderwhy/hy-event-store 在现代前端开发中，管理和共享状态始终是个挑战。而hy-event-store就是一款为了解决这个问题而生的利器，它是一个轻量级、跨框架的事件驱动全局状态管理工具，支持Vue、React、小程序等多种环境。让我们一起深入了解并体验其强大之处...
React（四）：事件总线、setState的细节、PureComponent、ref
weixin_42044763的博客
03-02 1427
原因是：这里回调的参数state是上一个合并状态的state，所以是可以在上一个的基础上做操作的！上面解决了这两个问题，但是真的是非常的麻烦，如果有多个数据，往下层也传了多个数据，那么我们要对每一个数据都写一个判断吗？所以我们一般不要直接去修改state中的数据，要修改内层数据的话，最好整个替换掉，给个新地址。2、第二个问题，如果子组件没有数据的改变，那么就不需要跟着父组件重新执行render函数了，我们同样可以用。1、刚才提到的，第一个参数是对象，第二个参数是回调，在第二个回调中，可以获取。
【Vue3 第十六章】非父子组件间传值
前端知识分享喵
02-01 1094
非父子组件传参
Event Store框架探究
weixin_34117522的博客
03-18 231
摘要： 　　游戏开发中，经常会越到千奇百怪的Bug。后台程序都是以demon 方式运行，要么GDB，要么Log。一些确定性的bug可以直接使用GDB调试，比如特定请求会Crash。如果是运行一段时间，Bug才会出现，无明显规律，那么也只能使用Log了。但是从成千上万条日志中Grep、分析、定位，然后修改代码、测试，这个过程效率极其低，有的时候挫折感倍强，想骂娘都。经过一些总结后，我们希望程序能够...
vue2.0父子组件及非父子组件之间的通信方法
08-31
3. **非父子组件通信** 对于非父子组件间的通信，Vue 2.0 提供了事件总线（Event Bus）或者使用 Vuex 状态管理库。这里我们讨论事件总线的使用： 首先，创建一个全局的 Vue 实例作为事件中心（Event Hub）： ```...
vue非父子组件通信问题及解决方法
08-27
vue非父子组件通信问题及解决方法 在 Vue 中，非父子组件之间的通信是一件棘手的事情。通常情况下，我们可以使用 props 传递数据从父组件到子组件，但是这种方法无法应用于非父子组件之间的通信。在本文中，我们将...
Vue非父子组件通信详解
08-30
主要为大家详细介绍了Vue非父子组件通信的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
redux状态管理
weixin_46351593的博客
08-13 481
文章目录redux理解redux是什么什么情况下需要使用reduxredux原理图：redux三个核心概念actionreducerstore官方文档解释：react-redux使用react-redux原型图：react-redux相关APIreact-redux笔记：1. 求和案例_react-redux基本使用：2. 求和案例_react-redux优化：3.求和案例_react-redux数据共享版:4. 求和案例_react-redux开发者工具的使用react-redux最终版: redux理解
09_非父子通信 -eventBus
weixin_56490825的博客
04-24 95
用到的第三方库 hy-event-store。
【前端-VUE】Vue3组件组成部分及组件通信（详解）
qq_48234463的博客
01-29 977
组件是Vue的核心，而组件间的状态管理和数据传递是开发绕不开的问题。在Vue中，组件和组件之间是相互独立的，所以需要一定的方法才能进行Vue的组件间的通信。
Vue非父子组件通信的几种方式
joey_hao的博客
02-28 1890
文章目录1.provide和inject1.1基本使用1.2如何处理响应式数据 1.provide和inject provide/inject主要适用于在一些深入嵌套的组件中，子组件想要获取父组件的部分内容的情况，此时可以在父组件中使用provide来提供数据，在子组件中使用inject来获取并使用这些数据（我们可以将依赖注入看作是“长距离的 prop”） 1.1基本使用 //父组件 data(){ return{ books:['javascript', 'vue', '
非父子组件之间的通信
Fairy的博客
06-01 970
方法： 1.使用中央事件总线（bus），也就是一个中介来完成。 <div id="app"> {{message}} <component-a></component-a> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></s...
vue组件之间通信
阳光下的冷静的博客
03-17 132
组件通信
vue非父子组件间的事件监听之全局事件总线
lingliu0824的博客
09-13 1470
为了实现期望的功能，很多时候我们需要在在一个组件中监听另一个组件的事件，父子组件之间的事件监听可以分别通过$emit和 $refs。但是在非父子组件间如何实现呢？事件总线是一个比较方便的方法。 全局事件总线实际是在main.js中给vue实例新增一个全局属性，并将该属性赋值为一个vue实例，通过 $emit来触发，通过 $on来监听，通过 $off来释放。 1.引入事件总线 2. 在组件A中触发事件 <template> <div> <button @click=
vue 进阶教程之：非父子组件通信方法（非Vuex）
MYuanFang的博客
05-16 2288
转载：https://www.jianshu.com/p/d3036001f6d3 很实用，需要的朋友可以进去看下
vue 非父子组件之间的通信--eventBus
eva_feng的博客
04-15 220
非父子组件之间的通信有两种方法：eventBus，vuex。这里先只记录下eventBus的使用方法。 例如：一个父组件中同时引入A组件和B组件，A组件中点击触发后将数值10传到B组件中。 第一步：定义一个公共的实例文件eventBus.js，作为中间仓库来传值。 //eventBus.js import Vue from 'vue' export default new Vue() 第...
【前端知识之Vue】Vue组件间的通信方式
weixin_44337386的博客
06-20 820
本系列主要整理前端面试中需要掌握的知识点。本节介绍Vue组件间的通信方式。
vue3父子组件间通信
08-12
在Vue3中，父子组件之间的通信可以通过props和emit来实现。 1. 使用props：父组件可以通过props属性向子组件传递数据。在子组件中，可以通过接收props属性来使用这些数据。在父组件中，可以通过修改props属性的值来...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值