vue兄弟组件传值的方法

最新推荐文章于 2024-02-23 17:56:29 发布
最新推荐文章于 2024-02-23 17:56:29 发布
阅读量279 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43640375/article/details/119044719
版权
本文介绍了在Vue中实现兄弟组件间通信的方法，主要利用Event Bus机制。首先，在`test.js`中创建事件总线，并在`main.js`中进行注册。接着，通过在发送组件中使用`$emit`触发事件，以及在接收组件中使用`$on`监听并接收事件来完成值的传递。
摘要由CSDN通过智能技术生成

vue兄弟组件传值的方法

主要通过event事件来传值:

  1. 传值的组件使用$emit发送事件
  2. 接受值的组件通过$on绑定事件接受
第一步

  • 创建js文件 test.js

    import Vue from 'vue'
export default new Vue()

  • 在main.js中注册js文件

    import test from "./plugins/test.js";
Vue.prototype.
最低0.47元/天 解锁文章
xingba9363
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue兄弟组件传值的两种方式
小柠檬爱编程
06-30 3226
本demo主要是为了演示vue项目中兄弟组件之间的传值，这里我演示了两种方式： a. bus总线传值； b. 我自己一般把它当成常规的传值(其实也就是子组件A传父组件，父组件再传子组 件B) 下边开始本次demo的编写： 一. bus总线传值的使用： 在项目中创建一个单独的eventBus.js文件 该js文件的内容很简单，就是暴露一个vue实例而已。 有人喜欢在main.js全局引入该js文件，我一般在需要使用到组件中引入。 创建相关组件： 父组件中注册并使用子组件： 分别在子组件one和two中
vue兄弟组件间传值
weixin_44383184的博客
03-18 870
举例子说明，一个组件中是input，监听输入的内容，在另一个组件的div中显示出来； 首先在assets中创建个事件总线js文件eventBus.js，文件中的代码如下： import Vue from ‘Vue’; export default new Vue; 然后创建组件：inputComponent，导入eventBus，用input事件监听输入的内容，在这个监听事件中，使用emit发送输...
vue组件间的传值-15种传值方法
lurenlinshen的博客
11-24 990
vue组件间的15种传值方法
兄弟组件之间的传值（bus、vuex、根对象）三种方法详解
浮游的博客
06-18 1403
有时候两个组件也需要通信（非父子关系），当然Vue2.0提供了Vuex，但在简单的场景下，可以使用一个空的Vue实例作为中央事件总线。 方法一：用eventBus <div id="app"> <c1></c1> <c2></c2> </div> var Bus = new Vue(); //为了方便将Bus（空vue）定义在一个组件中，在实际的运用中一般会新建一Bus.js Vue.component('c1',
vue兄弟组件传值的五种方法
zhuhaiuser的博客
12-05 5974
Vuex 是Vue的官方状态管理库，它可以将组件的共享状态抽离出来，以一个全局单例模式管理。通过 Vuex，兄弟组件可以直接共享状态，实现数据的传递。方法一:使用父组件作为中介在这种方法中，兄弟组件通过共同的父组件来传值。父组件作为中介，负责接收一个组件的数据，并将其传递给另一个组件。$refs是Vue中一个特殊的属性，可以用来访问组件实例或元素兄弟组件通过$refs来获取其他组件的实例，并直接访问其数据。2兄弟组件分别通过$emit 方法触发自定义事件，并通过$on 方法。方法三:使用事件总线。
vue.js 兄弟组件传值
weixin_30588827的博客
08-25 343
1、兄弟之间传递数据需要借助于事件车，通过事件车的方式传递数据 2、创建一个Vue的实例，让各个兄弟共用同一个事件机制。 3、传递数据方，通过一个事件触发bus.$emit(方法名，传递的数据)。 4、接收数据方，通过mounted(){}触发bus.$on(方法名，function(接收数据的参数){用该组件的数据接收传递过来的数据})，此时函数中的this已经发生了改变，可以使用箭头函数...
vue兄弟组件的传值
cp3___的博客
09-03 474
写这篇博客是自己在做vue的一些项目中发现，虽然你更多的是简单的一些父子组件的传值，但是很多场景是需要兄弟组件的传递的，之前不太懂，现在有学习这个vue兄弟组建的传值，来分享给大家 第一种传值方式 新建一个bus.js的文件 2.新建两个兄弟组件child2,child3,需要在每一个兄弟组件里面引入bus.js child2组件通过调用$emit发送给child3 ...
vue的兄弟组件传值
rock_23的博客
12-14 460
1.通过状态提升（react叫状态提升，vue可能还有别的叫法）的方法去实现兄弟组件传值 父组件： <template> <div> <ChildrentsA @close="clickhandler"/> <ChildrentsB :data="childrenData"/> </div> </template> <script> im
VUE 兄弟组件传值
Jana Jing的分享
02-24 6616
testA组件接收到testB组件的值：(接收值使用$on)testB组件传值给testA组件：(传值使用$emit)1.在项目中创建一个bus.js文件,暴露一个vue实例。到这里其实使用bus总线实现兄弟组件之间的传值已经完成。2.在父组件中注册两个子组件testA、testB。3.在两个子组件中分别引入bus。testA.vue子组件。testB.vue子组件。
VUE兄弟组件传值操作实例分析
10-16
根据给出的内容，实现兄弟组件间传值的步骤如下： 1. 创建事件总线实例。这可以是一个普通的Vue实例，也可以是一个专门为此目的而创建的模块。在这个例子中，我们创建了一个名为eventVue.js的文件，通过import引入...
vue3组件传值，父子兄弟组件传值
03-14
vue3父子组件传值，vue3组件传值，父子兄弟组件传值，props、emit、eventbus
Vue2 组件传值
weixin_47606392的博客
07-06 399
Vue2 组件传值 组件之间通信
Vue第23篇，Vue兄弟组件传值，Vue兄弟组件通讯的两种方式，详细过程（vue同级别组件传值通讯，vue兄弟组件通讯传值常用）
weixin_65793170的博客
01-02 6753
在 Vue.js 中，兄弟组件间的通信并不是像父组件到子组件那样直接，因为它们之间并没有直接的父子关系。不过，Vue 提供了几种机制，来实现兄弟组件之间的数据共享和通信。兄弟组件，就是同级别的组件
vue父子，兄弟组件传值
weixin_41646815的博客
08-21 1908
一、父子组件通讯 子组件给父组件传值 1、子组件页面 childA &lt;template&gt; &lt;div class="childA"&gt; &lt;div&gt; 这里是子组件childA的页面显示内容 &lt;/div&gt; &lt;div @click="clickMe"&gt; 定义一个点击方法叫click
兄弟组件传值（学习笔记）
TheMemoryHigh的博客
07-13 470
在vue开发中总会遇到组件传值问题，今天总结一下兄弟组件之间的传值方法。 1、子传父，父传子 2、vuex 3、eventBus 接下来介绍如何使用eventBus实现兄弟组件传值 首先我的需求是这样的，页面上由top，left，main，bottom四个组件构成。需要将top中的值传到left中。 ...
Vue中兄弟组件之间的传值方法
blinH的博客
11-14 855
兄弟组件传值 兄弟组件之间传值使用的是$bus的传值方式 同目录下创建bus.js，在里面写上以下代码： // bus.js中只需要写这么多就ok export default { install(Vue){ Vue.prototype.$bus = new Vue({}); } }; 创建后在main.js中引用bus.js，并调用 import bus from './bus.js'; Vue.use(bus); 兄弟传值：传值方 ...
Vue中兄弟组件之间传值
最新发布
jq2588的博客
02-23 692
在中，我们在使用不同组件的时候，组件之间可能会需要相互传值。以下有三种兄弟组件之间传值的方法。// 这里我让Older组件向younger组件传值// 父组件divOlder:msg-olderchange"change"
vue中兄弟组件传值
茂茂的博客
02-23 213
vue中兄弟组件传值
vue 兄弟组件传值
07-28
在 Vue 中，兄弟组件之间值可以通过共享父组件的数据来实现。有几种常用的方法可以实现兄弟组件之间的数据传递： 1. 使用事件总线（Event Bus）：创建一个空的 Vue 实例作为事件总线，在其中定义事件和对应的处理函数，然后在需要传值的组件中使用 `$emit` 触发事件，并在接收值的组件中使用 `$on` 监听事件来获取传递的值。 2. 使用 Vuex：Vuex 是 Vue.js 的状态管理库，允许你在应用中共享状态。你可以将需要传递的值存储在 Vuex 的 store 中，然后在兄弟组件中通过读取和修改 store 中的值来实现数据传递。 3. 使用 props 和自定义事件：在父组件中通过 props 将需要传递的值传递给子组件，在子组件中通过 `$emit` 触发自定义事件，并将需要传递的值作为参数传递给父组件，从而实现兄弟组件之间的数据传递。 这些方法都可以实现兄弟组件之间的数据传递，选择哪种方法取决于你的项目需求和个人喜好。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值