vue开发：Vue 非父子组件通信方法（非Vuex）

最新推荐文章于 2024-04-06 18:42:47 发布
最新推荐文章于 2024-04-06 18:42:47 发布
阅读量878 收藏
点赞数
分类专栏： vue开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Generon/article/details/75003858
版权

一提到两个非父子组件通信方法，有经验的 coder 肯定会说用 Vuex 啊，我个人建议不要为了用 Vuex 而用 Vuex，除非你的项目很大，耦合度很高，需要大量的储存一些 data，组件之间通信频繁。当然还是要根据自己的业务场景的来决定，总之还是那句话，不要为了用 Vuex 而用 Vuex！

Vue 官网介绍了非父子组件通信方法：


不过官网说的太简单了，新手看完估计还是一脸懵逼。还有这个空的 Vue 实例放到哪里合适也值得商榷。

这篇文章的目的就是用一个简单的例子让你明白如何用 Bus

Generon
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中非父子组件通信
weixin_47450807的博客
02-08 2509
在上一篇博客中，我们总结了父子组件通信方式有：props + emit。这里我们将总结一下，非父子组件通信方式，这里还不涉及到Vuex。 如果存在祖孙组件，我们可以通过Provide和Inject进行通信。 如果不是祖孙组件，也不是父子组件，我们可以采用Mitt全局事件总线第三方库来实现。 一、Provide和Inject Provide和Inject用于非父子组件之间共享数据，比如有一些深度嵌套的组件，子组件想要获取父组件的数据，如果不存在Provide和Inject选项，我们可以通过props进行一次传
vue 进阶教程之：非父子组件通信方法（非Vuex）
MYuanFang的博客
05-16 2296
转载：https://www.jianshu.com/p/d3036001f6d3 很实用，需要的朋友可以进去看下
vue父子组件通信以及非父子组件通信的方法
青年码农
05-24 399
组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系，父子关系、兄弟关系和隔代关系，简化点可以分为父子关系和非父子关系，下面就讲讲vue父子组件通信以及非父子组件通信的方法。使用代码格式会比较乱，所以直接使用图片演示。1.父子组件(1).父组件数据传递给子组件传递注：这里的chil...
VUE非父子组件通信
柚稚的博客
05-25 786
vue非父子组件通信
vue中组件间(非父子组件)通信的两种方法：eventbus与vuex的使用
Femi的博客欢迎大家
04-28 3765
父子组件的通信请查看这篇博文 此文主要介绍兄弟组件间的通信 所有组件通信方式请查看这篇博文 第一种：eventbus 创建bus.js export default(Vue) => { const eventBus = new Vue() Vue.prototype.$bus = { $on (...param) { eventBus.$on(...p...
vue2/vue3手写专题——实现父子组件通信、祖先通信的方法
最新发布
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
04-06 741
Vue 组件通信可以使用以下几种方法：父组件向子组件传递数据：使用 props 将数据从父组件传递给子组件，子组件可以通过 props 接收和使用数据。子组件向父组件传递数据：使用 $emit 触发自定义事件，父组件可以通过事件监听器来接收数据。非父子组件之间的通信：使用一个中央事件总线或 Vuex 状态管理库来管理和共享数据。通过 provide 和 inject 传递数据：在父组件中使用 provide 提供数据，在子组件中使用 inject 注入数据，可以实现
vue2 事件总线event bus 非父子组件间通信
weixin_48235660的博客
02-21 801
vue2 事件总线event bus 非父子组件数据传输 vue 事件总线event bus 非父子组件数据传输
Vue实现非父子组件通信
隔壁小王的博客
06-07 338
Vue非父子组件传值 这种情况，就需要自己定义一个eventbus，如下 1.自己定义bus，新建一个eventbus.js文件 import Vue from 'vue'; var bus = new Vue(); export default bus 2.在非父子组件导入 import bus from "../eventbus.js"; 类似子组件向父组件传值，定一个方法，利用emit emitOne() { bus.$emit("to_two", 111); }, 这
Vue中如何进行非父子组件通信？
有我更精彩的博客
03-03 527
当谈及Vue中非父子组件通信时，我们通常会考虑使用**Event Bus**或者**Vuex**来实现。以下是我为您准备的一些面试题内容和示例代码：
vue2.0父子组件及非父子组件之间的通信方法
08-31
3. **非父子组件通信** 对于非父子组件间的通信，Vue 2.0 提供了事件总线（Event Bus）或者使用 Vuex 状态管理库。这里我们讨论事件总线的使用： 首先，创建一个全局的 Vue 实例作为事件中心（Event Hub）： ```...
详解Vue 非父子组件通信方法（非Vuex）
12-11
一提到两个非父子组件通信方法，有经验的 coder 肯定会说用 Vuex 啊，我个人建议不要为了用 Vuex 而用 Vuex，除非你的项目很大，耦合度很高，需要大量的储存一些 data，组件之间通信频繁。当然还是要根据自己的业务...
vue中的event bus非父子组件通信解析
11-27
有时候非父子关系的组件也需要通信。在简单的场景下，使用一个空的Vue实例作为中央事件总线： var bus = new Vue() // 触发组件 A 中的事件 bus.$emit('id-selected', 1) // 在组件 B 创建的钩子中监听事件 bus.$on...
Vue组件通信中非父子组件传值知识点总结
10-15
在Vue中，非父子组件的通信通常依赖于事件总线（Event Bus）或者Vuex状态管理库。这里我们将主要讲解事件总线的方法。 事件总线是一种自定义事件机制，它实际上是一个单独的Vue实例，用来作为组件间通信的桥梁。...
vue开发：生成token保存在客户端localStorage中
热门推荐
Generon的博客
05-18 3万+
前面我们已经了解了可以通过localStorage在客户端(浏览器)保存数据。 回顾token 框架中的RESTful api快速领悟(中):token认证  框架中的RESTful api快速领悟(下):token的设置 我们后端有这样一个接口： http://localhost/yiiserver/web/index.php/token?client_appid=aaa&
vue开发computed，watch，method执行的先后顺序
Generon的博客
03-30 2万+
1#computed：计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。2#methods：methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。3#watch：是一种更通用的方式来观察和响应 Vue 实例上的数据变动。一个对象，...
vue开发：vue如何将小数转化为百分比
Generon的博客
01-16 1万+
let number=this.buildData.testResult.auto_retest_number/this.buildData.testResult.auto_retest_number; let str=Number(number*100).toFixed(2); str+="%"; this.testCoverages=str;
vue开发：axios的post请求接口出现404，但是get则成功
Generon的博客
10-20 1万+
methods:{ myclick(){ this.$http({ methods:"post", url:"../../../static/my.json", headers:{"Content-Type":'application/x-www-form-urlencoded; charset=UTF-8'} }).then((res)=>{ console.log(JSON.st
vue开发：vue调用高德地图
Generon的博客
07-10 1万+
前言：在之前的博客中，有成功引入高德地图，这是以前的地址  vue 调用高德地图。 因为一些需求，需要使用到地图的周边功能。 完整的项目代码请查看  我的github 一 、先看要实现的结果，参考了链家的周边，如图所示。  二 、原理分析 1、引入高德api，这个在之前的博客提到过，vue 调用高德地图。 2、使用地图的周边插件，这是  高德网站的api
vue2非父子组件通信
09-23
在 Vue 2 中，非父子组件之间的通信可以通过事件总线、Vuex 和 provide/inject 来实现。 1. 事件总线 (Event Bus): 在 Vue 实例上创建一个中央事件总线，其他组件可以订阅和触发事件。这种方式适用于简单的组件通信...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值