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

最新推荐文章于 2022-12-19 20:47:23 发布
最新推荐文章于 2022-12-19 20:47:23 发布
阅读量405 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hdchangchang/article/details/79776848
版权

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

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

下面来动手实现一下：

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


实现代码：




hdchangchang
关注
专栏目录
vue中非父子组件通信
weixin_47450807的博客
02-08 2559
在上一篇博客中，我们总结了父子组件通信方式有：props + emit。这里我们将总结一下，非父子组件通信方式，这里还不涉及到Vuex。 如果存在祖孙组件，我们可以通过Provide和Inject进行通信。 如果不是祖孙组件，也不是父子组件，我们可以采用Mitt全局事件总线第三方库来实现。 一、Provide和Inject Provide和Inject用于非父子组件之间共享数据，比如有一些深度嵌套的组件，子组件想要获取父组件的数据，如果不存在Provide和Inject选项，我们可以通过props进行一次传
Vue非父子组件之间的通信
猿飞梦的博客
05-31 328
// 注册一个空的js,作为中转站 bus.js import Vue from 'vue' export default new Vue() A组件： 非父子组件之间传值，需要定义个公共的公共实例文件bus.js， 作为中间仓库来传值，不然路由组件之间达不到传值的效果。 $emit发送事件 <template> <div @click="eleValue...
vue非父子组件通信
ma_hao99的博客
04-27 224
<div id="app"> <div v-if="this.message.length">{{message}}</div> <div id="" v-else><span>数据为空</span></div> <component-a></c...
VUE非父子组件通信
柚稚的博客
05-25 803
vue非父子组件通信
VUE非父子组件之间通信的几种方式
苟冬新
08-27 3055
一.使用广播的方式$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.$
vue2.0父子组件及非父子组件之间的通信方法
08-31
对于非父子组件间的通信，Vue 2.0 提供了事件总线（Event Bus）或者使用 Vuex 状态管理库。这里我们讨论事件总线的使用： 首先，创建一个全局的 Vue 实例作为事件中心（Event Hub）： ```javascript const Hub ...
vue非父子组件通信问题及解决方法
08-27
在 Vue 中，非父子组件之间的通信是一件棘手的事情。通常情况下，我们可以使用 props 传递数据从父组件到子组件，但是这种方法无法应用于非父子组件之间的通信。在本文中，我们将介绍非父子组件通信的问题和解决方法...
vue2利用Bus.js如何实现非父子组件通信详解
10-19
Bus.js是利用Vue实例作为全局事件总线（event bus）来实现非父子组件间通信的一种解决方案。下面详细阐述其原理、实现步骤及示例。 ### Vue.js中的非父子组件通信概述 在Vue.js中，组件通信主要有以下几种方式： -...
Vue父子组件之间的通信实例详解
10-17
Event Bus 是一个简单的 Vue 实例，用于在非父子关系的组件间通信；Vuex 则是专门用来管理应用状态的工具，它提供了一种规范化的状态管理模式，使组件之间的通信更加清晰。 总的来说，Vue 父子组件间的通信主要是...
Vue非父子组件之间传值
01-08
然而，在实际应用中，我们常常需要非父子组件之间进行通信。由于Vue的单向数据流原则，直接修改父组件的值在子组件中是不被推荐的，因此需要采取其他方法来实现实现组件间的数据传递。这里介绍的就是使用“Bus”（或...
Vue非父子组件通信详解
08-30
主要为大家详细介绍了Vue非父子组件通信的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue组件通信中非父子组件传值知识点总结
10-15
在本篇文章里小编给大家整理的是关于Vue组件通信中非父子组件传值知识点总结，有兴趣的朋友们学习下。
Vue之非父子组件通信
渣渣砖
03-01 305
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 1175
在vue的1,0版本里，组件之间的通信是通过$dispatch和$broadcast来进行通信的，但是在2.0版本里面则取消上述这两个方法，并提出了新的解决办法。关于vue2.0的父子组件的通信上文也有讲过，现在要讲的是非父子组件。     在vue官网中，官方推荐使用eventBus来进行非父子组件的通信，本文现在演示在项目中如何实现非父子组件通信。首先在父组件(App.vue)里，有两个子组
VU 非父子组件通信
07-28 365
组件关系可分为父子组件通信（通过 props 传递数据）、兄弟组件通信、跨级组件通信。这里我主要介绍跨级组件通信的方法。
vue实现非父子组件之间的通信
qq_41591368的博客
11-19 217
首先创建一个中间通信的文件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 614
有两种方式： 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 1058
在开发中，我们构建了组件树之后，除了父子组件之间的通信之外，还会有非父子组件之间的通信。这里主要讲两种方式：1、Provide和Inject 2、Mitt全局事件总线。
Vue父子组件通信：实例详解与代码演示
"这篇教程详细讲解了Vue框架中父子...- 使用Vue的事件总线进行非父子组件间的通信。 - 使用Vuex进行全局状态管理，实现组件间的数据共享。 了解并熟练掌握这些通信方式，将有助于提高Vue应用的开发效率和可维护性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值