vue非父子组件之间的通信

最新推荐文章于 2022-07-26 09:00:00 发布
最新推荐文章于 2022-07-26 09:00:00 发布
阅读量213 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/L_bic/article/details/79734930
版权

在将项目用vue重写时我遇到了这么个问题。A是一个列表组件，点击列表中某项时跳转至B组件（详情页）。

因为是前后端分离的开发方式，调试前后端接口需要先build前端再放到服务器上，所以我想尽量少的写请求后端的接口。

项目之前的方式是用解析路由在B中解析出点击对象的ID,再去数据库查询此ID的其他信息。

但是我想让A向B跳转时将点击项的所有信息带过去。于是调研非父子组件的通信。

1.$dispatch  $broadcast 这个方法vue2.0已废弃

2.eventBus  https://blog.csdn.net/u013034014/article/details/54574989?locationNum=2&fps=1

这个方法确实很容易地实现了兄弟组组件的通信，遗憾的是我在A $emit成功，B的钩子函数中 $on 已经赶不上趟了，因为A跳转到了B!

于是我在想要不要把A与B写在一个页面中，用v-if 或v-show控制显示。权衡整个项目都需要和列表信息打交道以后我决定还是用vuex比较合适。

3.vuex 

L_bic
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue2.0父子组件及非父子组件之间的通信方法
08-31
给大家介绍了vue2.0父子组件及非父子组件之间的通信方法，非常不错，具有参考借鉴价值，需要的朋友参考下吧
vue中非父子组件通信
weixin_47450807的博客
02-08 2470
在上一篇博客中，我们总结了父子组件通信方式有：props + emit。这里我们将总结一下，非父子组件通信方式，这里还不涉及到Vuex。 如果存在祖孙组件，我们可以通过Provide和Inject进行通信。 如果不是祖孙组件，也不是父子组件，我们可以采用Mitt全局事件总线第三方库来实现。 一、Provide和Inject Provide和Inject用于非父子组件之间共享数据，比如有一些深度嵌套的组件，子组件想要获取父组件的数据，如果不存在Provide和Inject选项，我们可以通过props进行一次传
Vue非父子组件之间的通信
m0_71485750的博客
07-26 1564
让App.vue提供一些数据给HomeContent.vue使用[外链图片转存失败,在provide中引入的this.name本身并不是响应式。此篇讲解的是,在学习状态管理之前,非父子间通信的方案。一些深度嵌套的组件，子组件想要获取父组件的部分内容。computed返回的是一个ref对象。mitt或tiny-emitter。在开发中，我们构建了组件树之后，除了。//通过provide将数据传出。一个provide选项。//发送事件到事件总线上。//监听事件总线上的事件。...
vue非父子组件通信 （两个不同的组件通信）
Bright2017的博客
09-04 5146
vue非父子组件通信 （两个不同的组件通信）
vue.js之非关系组件通信（八竿子打不着的关系组件通信）
陈小陈的博客
01-03 797
非关系组件通信 非关系组件通信，依赖vue实例方法中的$on（侦听）、$off（移除侦听事件）、$emit（发出出）、$once（只侦听一次）。 首先。需要实例化一个vue对象。 eventBus.js import Vue from "vue"; export const EventBus = new Vue(); App.vue <template> <div id="app"> <CompA></CompA> </div&gt
Vue中使用Bus.js进行非父子组件通信
LeslieYoung的技术博客
06-12 734
我们都知道在Vue中父子组件可以通过props和$emit()来进行数据信息的通信。但是如何实现非父子组件间的通信呢？其实我们可以通过创建一个Vue实例Bus作为媒介来进行通信。首先在要相互通信的组件中，都引入Bus，然后在两个组件中调用bus事件触发、监听来实现参数的传递和通信。 Bus.js可以如下写法： import Vue from 'vue'; // 使用 Event Bus co...
vue非父子组件通信问题及解决方法
08-27
主要介绍了vue非父子组件通信问题及解决方法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
Vue非父子组件通信详解
08-30
主要为大家详细介绍了Vue非父子组件通信的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
VUE非父子组件之间通信的几种方式
苟冬新
08-27 2874
一.使用广播的方式$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非父子组件之间通信（单页应用）
Lofan 的博客
06-13 597
有两种方式： eventBus Vuex 1. 用eventBus 声明一个空的Vue模块eventBus import Vue from 'vue' // 定义空的vue实例，作为 eventbus实现非父子组件之间的通信(vue2.x中去掉了broadcast) var eventBus = new Vue({}); export default eventBus; “医院列表页...
Vue 组件通信 非父子组件之间通信（兄弟组件之间通信）
qq_40774743的博客
07-20 474
1， 父子组件之间通信（属性传值，props承接，this.$emit往上带参传值，自定义事件接受。....过程省去,,,,,）; 2，父子，非父子，可使用 vuex 实现，过程省去，goole解决（以及官网解决之）； 2,方法二，非父子组件之间通信（1，需要建立一个中转的Vue实例Bus，然后组件A，组件B 通过这个bus实例中转一下达成AB通信的目的）； （1），建立bus.js(bus...
vue组件之间通信（非父子之间通信）
chenzhuozhu的博客
08-15 143
视图如下： 单击点击后： 下列为实现代码： html: &lt;dvi id="app"&gt; &lt;brother&gt;&lt;/brother&gt; &lt;hr&gt; &lt;sbrother&gt;&lt;/sbrother&gt; &lt;/dvi&gt; &lt;template id="bro
vue非父子组件、兄弟组件之间的传值通信
WanFengZhou
05-31 1137
一般来说在vue项目里面的父、子组件间的传值很容易理解，父传子无非就是在子组件里面用props来显示的声明父组件传递的属性，例如： 子组件： <!--这是子组件 child.vue --> <template> <div class="not-found"> {{ message }} </div> </template> <script> props: ['message'], export default {
Vue中父子及非父子组件之间的通信方法
sanbeisuk的博客
09-26 585
Vue中父子及非父子组件之间的通信方法 父子组件之间的通信方法 父级->子级通信 (依赖单向数据绑定+props实现) Vue.component('Father', { //注册了含有data属性的父组件 template: '#father', data () { return { val :...
vue非父子组件间的通信
weixin_44432032的博客
09-20 97
非父子组件间的通信 非父子组件间的通信，可以通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件 var Event=new Vue(); Event.$emit(事件名,数据); Event.$on(事件名,data => {}); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>非父子组件间的通信</title&
最详细的vue的父子组件以及非父子组件之间的通信方式
webbingAndKami的博客
06-19 467
1.父组件传递数据给子组件父组件数据如何传递给子组件呢？可以通过props属性来实现父组件：//这里必须要用 - 代替驼峰data(){ return { msg: [1,2,3] }; }子组件通过props来接收数据: 方式1：props: ['childMsg']方式2 :props: { childMsg: Array //这样可以指定传入的类型，如果类型不对，会警告 }方式3：props...
vue组件之间通信
阳光下的冷静的博客
03-17 128
组件通信
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、付费专栏及课程。

余额充值