vue非父子之间通信 - 利用空Vue做事件总线

最新推荐文章于 2024-03-13 09:37:12 发布
原创 最新推荐文章于 2024-03-13 09:37:12 发布 · 445 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种在Vue中实现非父子组件间简单通信的方法。通过一个实例演示了如何在点击列表项时，在header-nav中显示点击的是第几个列表项。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

比较简单的非父子组件之间的通信可以采用下述模式，复杂的大型单页面程序使用VueX。

Vue官方提供解释比较简单：

下面来动手实现一下：

场景：实现点击某个列表项，header-nav中显示出点击的是第几个列表项。


实现代码：




Vue中非父子组件通信的方法
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-26 1385
Vue中组件通信的主要方式包括：props传递、事件监听、自定义事件、全局事件总线、Vuex状态管理、ref引用等。然而，当涉及到跨越多个层级的组件或者是没有直接父子关系的组件时，就需要采用更为灵活的通信方式。虽然这种方法主要用于父子组件通信，但在某些情况下也可以通过巧妙的设计来实现非父子组件间的通信。例如，一个组件可以作为中介，接受其他组件的输入并通过插槽传递出去。} } };} } };
vue中非父子组件通信
weixin_47450807的博客
02-08 2638
在上一篇博客中，我们总结了父子组件通信方式有：props + emit。这里我们将总结一下，非父子组件通信方式，这里还不涉及到Vuex。 如果存在祖孙组件，我们可以通过Provide和Inject进行通信。 如果不是祖孙组件，也不是父子组件，我们可以采用Mitt全局事件总线第三方库来实现。 一、Provide和Inject Provide和Inject用于非父子组件之间共享数据，比如有一些深度嵌套的组件，子组件想要获取父组件的数据，如果不存在Provide和Inject选项，我们可以通过props进行一次传
Vue非父子组件之间的通信
猿飞梦的博客
05-31 356
// 注册一个空的js,作为中转站 bus.js import Vue from 'vue' export default new Vue() A组件： 非父子组件之间传值，需要定义个公共的公共实例文件bus.js， 作为中间仓库来传值，不然路由组件之间达不到传值的效果。 $emit发送事件 <template> <div @click="eleValue...
vue非父子组件通信
ma_hao99的博客
04-27 291
<div id="app"> <div v-if="this.message.length">{{message}}</div> <div id="" v-else><span>数据为空</span></div> <component-a></c...
VUE非父子组件通信
柚稚的博客
05-25 876
vue非父子组件通信
VUE非父子组件之间通信的几种方式
苟冬新
08-27 3187
一.使用广播的方式$emit(), $on() 1.创建js文件 import Vue from 'vue' export default new Vue() 组件A import bus from '../../static/js/commonvue' mounted() { bus.$emit('componentsA', ‘组件A的值’); //传值 } 组件B import bus from '../../static/js/commonvue' mounted() { bus.$
Vue之非父子组件通信
渣渣砖
03-01 353
Vue之非父子组件通信 非父子组件传值方法： 1：在model中新建一个js文件 引入Vue 实例化Vue 最后暴露相关实例 // 引入vue import Vue from 'vue' // 创建一个空的vue实例 var bus=new Vue() // 将实例暴露出去 export default bus 2：再要广播的位置和接收广播的位置引入刚刚创建的实例 import B...
vue2.0之非父子组件通信
Tank_in_the_street的博客
06-11 1232
在vue的1,0版本里，组件之间的通信是通过$dispatch和$broadcast来进行通信的，但是在2.0版本里面则取消上述这两个方法，并提出了新的解决办法。关于vue2.0的父子组件的通信上文也有讲过，现在要讲的是非父子组件。     在vue官网中，官方推荐使用eventBus来进行非父子组件的通信，本文现在演示在项目中如何实现非父子组件通信。首先在父组件(App.vue)里，有两个子组
VU 非父子组件通信
07-28 411
组件关系可分为父子组件通信（通过 props 传递数据）、兄弟组件通信、跨级组件通信。这里我主要介绍跨级组件通信的方法。
vue非父子组件通信问题及解决方法
08-27
主要介绍了vue非父子组件通信问题及解决方法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
Vue非父子组件通信详解
08-30
主要为大家详细介绍了Vue非父子组件通信的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue组件通信中非父子组件传值知识点总结
10-15
在本篇文章里小编给大家整理的是关于Vue组件通信中非父子组件传值知识点总结，有兴趣的朋友们学习下。
vue实现非父子组件之间的通信
qq_41591368的博客
11-19 260
首先创建一个中间通信的文件VueEvent.js 文件内容 // 接收数据的中间文件 import Vue from 'vue' var VueEvent = new Vue() export default VueEvent 在根组件引用两个子组件 <template> <div id="app"> <v-home></v-home> <br> <br> <br>
Vue非父子组件之间通信（单页应用）
Lofan 的博客
06-13 657
有两种方式： eventBus Vuex 1. 用eventBus 声明一个空的Vue模块eventBus import Vue from 'vue' // 定义空的vue实例，作为 eventbus实现非父子组件之间的通信(vue2.x中去掉了broadcast) var eventBus = new Vue({}); export default eventBus; “医院列表页...
vue之非父子组件通信实现方式
CamphorBlossom的博客
12-19 1170
在开发中，我们构建了组件树之后，除了父子组件之间的通信之外，还会有非父子组件之间的通信。这里主要讲两种方式：1、Provide和Inject 2、Mitt全局事件总线。
Vue 中如何进行非父子组件通信？
最新发布
Twinkle_sone的博客
03-13 850
🎈在构建复杂的 Vue 应用程序时，我们经常会遇到需要在非直接父子关系的组件之间进行通信的情况。本文将深入探讨 Vue 提供的多种非父子组件通信方法，并提供实用的代码示例和应用场景。
vue父子组件和非父子组件的通信
莫问前程F1的博客
06-13 648
1.父组件向子组件通信（可以通过props属性来实现）父组件：&lt;parent&gt; &lt;child :child-msg="msg"&gt;&lt;/child&gt;//这里必须要用 - 代替驼峰 &lt;/parent&gt; data(){ return { msg: [1,2,3] }; }子组件：方式1：props: ['childM...
VUE中非父子组件传值（不仅限于兄弟组件）
Bonjourjw的博客
11-23 361
一 背景 接着上一篇文章补充一点：很多时候我们可能追求组件化，一个页面里包含了好几个组件，但很不巧地某两个组件间又有关联关系，需要获取另一组件的数据。恰巧又不想用动用Vuex，这时候就想到了事件总线的方法。 二 实现 由于想要在层级关系较复杂的两个组件间通信，故如下图所示，将事件总线设置为全局的。在要使用的地方仍按上篇博文的方法使用即可。 ...
vue3事件总线vue-happy-bus: 自动清理监听事件
**在 vue 中，我们可以使用 event bus 来实现跨组件间通信**: 这解释了事件总线在Vue中的作用，它是一种在不同组件间传递信息的方式，可以用于父子组件通信，也可以用于非直接关联的组件之间的通信。 **但一个弊端...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值