vue中非父子组件之间传递值

最新推荐文章于 2024-07-11 12:39:58 发布
最新推荐文章于 2024-07-11 12:39:58 发布
阅读量2.2k 收藏 3
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/web_callBack/article/details/79796200
版权

1.创建一个公共的js文件 bus.js


bus.js


2.创建两个兄弟组件one.vue和two.vue

one.vue


two.vue


3.将两个组件放在同一个父组件abc.vue中


最终运行效果如下


web_callBack
关注
专栏目录
vue中非父子组件通信
weixin_47450807的博客
02-08 2555
在上一篇博客中，我们总结了父子组件通信方式有：props + emit。这里我们将总结一下，非父子组件通信方式，这里还不涉及到Vuex。 如果存在祖孙组件，我们可以通过Provide和Inject进行通信。 如果不是祖孙组件，也不是父子组件，我们可以采用Mitt全局事件总线第三方库来实现。 一、Provide和Inject Provide和Inject用于非父子组件之间共享数据，比如有一些深度嵌套的组件，子组件想要获取父组件的数据，如果不存在Provide和Inject选项，我们可以通过props进行一次传
Vue中非父子组件之间传值
人间草木
01-24 2275
非父子组件（跨级组件和兄弟组件）通信时，使用了bus（中央事件总线）的一个方法，用来触发和接收事件，进一步起到通信的作用。 Demo效果展示 新建一个bus.js文件，写入如下代码 公共bus.js // 公共bus.js // 非父子组件之间传值，需要定义个公共的公共实例文件bus.js，作为中间仓库来传值，不然路由组件之间达不到传值的效果 import V...
Vue非父子组件之间传值
01-08
非父子组件间的传值(bus/总线/发布订阅模式/观察者模式) // 在每一个组件上添加BUS属性 Vue.prototype.bus = new Vue() Vue.component('child',{ props:{ content:String }, data(){ //子组件不能直接修改父组件的值 return { copyConten
[Vue] 非父子组件之间的传值
BnuzLeon的博客
02-13 401
NON PARENT CHILD COMPONENTS DATA TRANSFER 例子 参考代码：code 实现功能： 点击Child1，改变Child2的属性。 点击Child2，改变Child1的属性。 1. 兄弟组件之间的传值。 2. 祖父和孙子之间的传值。 方法1： 思路 使用Vuex来实现非父子组件的传值。这里先不实现，但是是一个实现的思路。 方法2： 思路 1. 使用...
vue3 两个组件之间传值
最新发布
A18937260063的博客
07-11 405
vue3 两个组件之间传值
vue：非父子组件传值
EchoLiner的博客
04-14 478
非父子组件传值
vue 非父子组件之间传值 bus / 总线
輕描淡寫的博客
09-21 586
一、在Vue 的原型中创建一个属性 bus        Vue.prototype.bus=new Vue(); 二、子组件中绑定事件 比如叫  handleClick，在子组件中定义 hanleClick 方法 ，handleClick 方法中使用       this.bus.$emit('change',this.contentmsg);  触发事件 ‘ change ’ ,携带th...
vue2.0父子组件以及非父子组件通信传参详解
aiduojia5871的博客
12-11 110
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢？可以通过props属性来实现 父组件： 　　 1 <parent> 2 <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰 3 </parent> 4 5 data(){ 6 return { 7 ...
Vue组件通信中非父子组件传值知识点总结
10-15
在组件通信中，常见的有父子组件之间的通信，而本文将重点探讨非父子组件之间的值传递，即如何在没有直接关系的组件之间共享数据。 在Vue中，非父子组件的通信通常依赖于事件总线（Event Bus）或者Vuex状态管理库。...
vue.js单文件组件中非父子组件的传值实例
10-18
然而，在这种模式下，非父子组件之间的通信可能会变得复杂，因为传统的props和事件不能直接用于非直接相关的组件。在Vue.js官方文档中，推荐使用一个全局的Vue实例作为事件总线（Event Bus）来解决这个问题。 在...
非父子组件间的传值
我不想说
03-15 348
使用vuex或者bus总线机制可实现非父子组件的传值。 比如要实现点击上面的hello，下面的组件也变成hello，点击下面的world，上面的组件也变成world <div id="app"> <child num='hello' ></child> <child num='world' ></child> ...
vue非父子组件之间传值
xfmuchengxue的博客
07-10 716
记录第一次做项目遇到的坑，可能说的有所欠缺，但是功能是实现的。为了实现头部的搜索框，搜索table表格中的数据，因为是两个页面，所以需要组件传值。首先，main.js中创建事件中心eventHubnew Vue({ el: '#app', router, components: { App }, template: '&lt;App/&gt;', // 非父子组件传递数据,创建事件中心e...
vue组件传参（非父子）
qq_45888887的博客
04-20 632
项目场景： vue组件之间传参 问题描述 传递参数组件 this.$router.replace({ path: ‘/index’, query: { username: this.loginForm.username } }) 接受组件 this.$route.query.username
vue.js2.0非父子 组件之间传参
milli236的博客
09-22 418
如果2个组件不是父子组件那么如何通信呢？这时可以通过eventHub来实现通信.  所谓eventHub就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件. let Hub = new Vue(); //创建事件中心11 组件1触发： div @click="eve"> methods: { eve() { Hub.$emit('change','
vue组件非父子之间通信
weixin_42413684的博客
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
非父子组件的数据传递
wd
09-05 608
复制代码可以直接查看效果<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script> <styl
Vue - 组件传值（父子组件间传值、非父子组件间传值）
kaven
11-16 1163
推荐：Vue学习汇总 Vue学习（十五）- 组件传值（父子组件间传值、非父子组件间传值） 如果你对组件不太了解，推荐你先阅读它：Vue学习（七）- Vue组件基础 父子组件间传值 父组件向子组件传值： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件传值</title> <script src="./js/vue
vue-组件传值方式-非父子组件传值解决方案-js版
东东爱编码博客
03-09 2427
文章目录一、vue-组件传值方式-非父子组件传值解决方案-js版1. 非父子组件传值-方式一【事件总线】2. 非父子组件传值-方式二【$attrs/listeners】3. 非父子组件传值-方式三【vuex】 一、vue-组件传值方式-非父子组件传值解决方案-js版 1. 非父子组件传值-方式一【事件总线】 场景： 事件总线 步骤一：建立一个公共的js文件，专门用来传递消息。 // bus....
Vue非父子组件之间通信（单页应用）
Lofan 的博客
06-13 612
有两种方式： eventBus Vuex 1. 用eventBus 声明一个空的Vue模块eventBus import Vue from 'vue' // 定义空的vue实例，作为 eventbus实现非父子组件之间的通信(vue2.x中去掉了broadcast) var eventBus = new Vue({}); export default eventBus; “医院列表页...
在vue中非父子组件通讯如何实现
07-11
在Vue中，非父子组件之间的通信可以通过以下几种方式实现： 1. 事件总线（Event Bus）：创建一个新的Vue实例作为事件中心，其他组件通过$emit触发事件，再通过$on监听事件来进行通信。 2. Vuex：Vuex是Vue的官方...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值