非父子组件传值的方法及bus的用法

最新推荐文章于 2022-03-15 10:45:22 发布
最新推荐文章于 2022-03-15 10:45:22 发布
阅读量209 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LTT1995/article/details/108912486
版权 
  1. 通过使用vuex

  2. 通过发布订阅的方式（总线机制/bus/观察者模式）

通过bus，将bus放在vue的原型上，所有的vue实例都有这个bus属性。后面的content都换成selfContent
在这里插入图片描述
this作用域发生了变化，所以我们要对this做一个保存。
在这里插入图片描述
最后要在组件销毁时解除事件绑定：
在这里插入图片描述

LTT1995
关注
【Vue3 第十六章】非父子组件间传值
前端知识分享喵
02-01 1312
非父子组件传参
非父子组件之间的三种传值办法
Qian_mos的博客
04-22 3773
非父子组件之间的传值 兄弟组件的传值：总线—发布订阅者—观察者模式 Vue.prototype.属性 = new Vue()，使Vue的原型上的属性等于Vue实例 <div id="root"> <child content="miss"></child> <child content="mos"></child> &l...
非父子组件传值的方式(兄弟间组件传值)
zhengwenhaodezw的博客
12-12 428
采用bus 第三方总线的方式传值 第一步 是封装总线bus.js import Vue from 'vue' export default new Vue() 第二步 是编写组件a <template> <div> <el-button type="primary" @click="getChange">消息</el-button&g...
非父子组件传值
Geordies的博客
02-15 118
# 非父子组件间传值 当组件的嵌套多时，非父子组件间传值就显得复杂，除了使用vuex (opens new window)实现之外，还可以通过Bus(或者叫 总线/发布订阅模式/观察者模式)的方式实现非父子组件间传值。 <div id="root"> <child1 content="组件1：点我传出值"></child1> <child...
非父子组件间的传值
我不想说
03-15 347
使用vuex或者bus总线机制可实现非父子组件的传值。 比如要实现点击上面的hello，下面的组件也变成hello，点击下面的world，上面的组件也变成world <div id="app"> <child num='hello' ></child> <child num='world' ></child> ...
非父子组件进行传值
单飞吧的博客
10-16 151
非父子组件之间传值，需要定义个公共的公共实例文件bus.js，作为中间仓库来传值，不然路由组件之间达不到传值的效果。 公共bus.js //bus.js import Vue from 'vue' export default new Vue() 组件A： <template> <div> A组件: <span>{{elementValue}}</span> <input type="button" value="点击触.
vue.js 传值方法（父子组件传值、非父子组件传值）
01-08
**一、父子组件传值** 1. **父组件向子组件传递值** - 基本原理：使用`props`属性从父组件向子组件传递数据。 - 步骤： - 在父组件中导入并注册子组件，例如： ```javascript import HomeChild from './...
Vue组件通信中非父子组件传值知识点总结
10-15
总结来说，理解非父子组件传值的关键在于掌握事件总线的使用。通过创建一个独立的Vue实例作为事件总线，组件可以触发和监听自定义事件，以此达到数据的传递。这种方法简单易用，但不适用于大型应用，因为随着组件...
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
10-18
三、非父子组件传值 在Vue应用中，非父子组件间的通信可以使用一个中央事件总线（Event Bus），也就是一个空的Vue实例作为中央通信服务。 首先，需要创建一个公共的bus.js文件： ```javascript // bus.js import ...
Vue非父子组件之间传值
01-08
然而，在实际应用中，我们常常需要非父子组件之间进行通信。由于Vue的单向数据流原则，直接修改父组件的值在子组件中是不被推荐的，因此需要采取其他方法来实现实现组件间的数据传递。这里介绍的就是使用“Bus”（或...
总线机制bus来解决非父子组件之间的传值
qq_36958916的博客
11-10 160
实现点击dell，下面的li变成dell,点击li，上面的dell变成li <div id="root"> <child content="dell"></child> <child content="li"></child> </div> <script> Vue.prototype.bus = new Vue() //vue的prototype上挂载bus 属性。每一个组件都会有bus这个属性
Vue 非父子组件间传值
purple_lumpy的博客
10-14 527
非父子组件（隔多代、兄弟等）之间传值，主要有两种方式：   - vuex   - 发布订阅模式(在 vue 中称为总线机制) 下文将介绍通过总线机制（Bus/总线／发布订阅模式／观察者模式），解决非父子组件之间的传值。 &lt;div id="root"&gt; &lt;child content="Hello"&gt;&lt;/child&gt; &lt;child co...
Vue-非父子组件间传值
weixin_45497246的博客
05-13 324
非父子组件间传值主要通过两种方式： vuex（一般用于大项目，耦合度很高，需要大量的储存一些 data，组件之间通信频繁。） bus 通过 一个vue实例Bus作为媒介，要相互通信的兄弟组件之中，都引入Bus，然后通过分别调用Bus事件触发和监听来实现通信和参数传递。 ...
Vue非父子组件传值
qq_49867247的博客
03-15 4123
Vue非父子组件传值： 事件总线 $attrs / listeners
父子组件传值，非父子组件传值 实例方法/事件封装（2018/12/11）
baitong0848的博客
09-12 107
.一、父组件给子组件传值 （当子组件在父组件中当做标签使用的时候 通过自定义属性进行传值，接受的时候通过this.props进行接受） 思路： 父组件引入子组件，在子组件的标签中添加自定义属性 然后将this.state中的属性传给子组件的标签 子组件通过this.props 接收父组件传过来的属性，添加到虚拟dom中，再通过对虚拟dom的渲染在页面上显示出来 this....
vue父子、非父子组件传值超全方法值得拥有~
故里的博客
03-29 274
1.父向子传值 --------------------Father.vue ---- 父组件-------------- <template> <div> <!-- 父组件 --> <son :father-to-son='passValue'></son> </div> &l...
非父子组件间传值——Bus/总线机制
weixin_44561961的博客
06-05 169
文章目录前言一、二、使用步骤1.引入库总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： 总结 提示：这里对文章进行总结： 例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使
04 非父子组件传值
bin_2659017380的博客
05-27 285
一、非父子组件传值 要点： 1、需要在全局vue的实例的原型上挂在一个新的vue实例 2、挂载完之后，就可以让所有的组件通过原型上的vue实例实现一个连接的桥梁 具体实现 1、发送数据者 使用原型上的vue实例的 $emit 自定义事件 2.、接受数据者 使用原型上的vue实例的 $on 监听 main.js中： //单一事件管理 挂载到全局 Vue.prototype.Event=new Vue() 三个组件 a.vue b.vue c.vue index.vue index.vue是a、b、c的
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值