兄弟组件传值，$emit和$on的使用

最新推荐文章于 2022-10-25 14:13:04 发布
最新推荐文章于 2022-10-25 14:13:04 发布
阅读量744 收藏
点赞数
分类专栏： vue学习 文章标签： vue js vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46360310/article/details/108011358
版权
本文介绍了在Vue中如何使用$emit和$on进行兄弟组件间的通信。首先，需要注册总线事件并绑定到原型上。接着详细讲解了$emit方法用于发送数据，例如通过点击按钮触发$emit发送组件B的数据。然后阐述了$on方法的用途，即在组件A中监听并接收自定义事件，通常在mounted或created生命周期钩子中使用。
摘要由CSDN通过智能技术生成
使用之前

使用之前需要注册总线事件
先创建一个空的示例，并且将自定义的$bus绑定到原型上

Vue.prototype.$bus = new Vue()
$emit

发送数据用的
$emit(‘事件名’ , ‘数据’ )

<template>
	<div>
		组件B
		<button @click="send">发送</button>
	</div>
</template>

<script>
最低0.47元/天 解锁文章
学习前端ing
关注
专栏目录
vuejs使用$emit和$on进行组件之间的传值的示例
11-26
$emit和$on可以实现组件之间的传值，我们知道父组件传值给子组件使用props，但是不允许子组件传值给父组件，这时候使用这个就可以实现了。 注意：$emit和$on的事件必须在一个公共的实例上，才能够触发。 例子：我要实现某个系统的通讯录功能，在web端我们可以使用基于jQuery的ztree插件实现目录的展现，但是在vuejs框架里面，tree目录需要通过递归组件实现。 1、现在有两个组件，父组件contact_index.vue，子组件cust_tree.vue 2、点击父组件里面的选择银行，跳出银行树目录结构（使用vuejs的递归组件实现）,这里面需要做两种传值： （1）父组件
Vuejs 用$emit 与 $on 来进行兄弟组件之间的数据传输
xiaokanfuchen86的博客
04-22 305
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Vue2-单一事件管理组件通信</title> <script src="vue.js"></script> <scri...
$emit和$on在兄弟组件传值的用法
weixin_56115652的博客
01-09 463
$emit用于发送数据 $on用于接收数据 <<创建bus最佳方式>> new Vue({ ........ beforeCreate() { this.prototype.$bus=this }, ........ }) $emit和$on（bus.$on）_碉堡飞哥的博客-CSDN博客_$bus.$on一、$emit1、this $emit（'自定义时间名',要传送的数据）；2、触发当前实例上的时间，要传递的数据..
Vue兄弟组件之间的传值$on和$emit
qq_23159841的博客
10-31 770
其实就是由vm.$emit触发$on定义的事件 vm.$on('test', function (msg) { console.log(msg) }) vm.$emit('test', 'hi') // => "hi" Bus.js import Vue from 'vue' export default new Vue 组件WindowOnresize <template> <div></div> </template> &..
vue兄弟组件传参
aitanxiaofeng的博客
10-25 1930
需要注意,如果兄弟组件2为v-if="active=1"的逻辑判断,还未创建的情况下,需要先赋值父组件data,再修改active=1,否则可能父组件data还未修改成功,兄弟组件2已经提前created了,导致传值是失败。这里需要注意,与上面相反,如果兄弟组件2为v-if="active=1"的逻辑判断,还未创建的情况下,需要先修改active=1,再调用兄弟组件2函数,否则可能出现兄弟组件2还未初始化,调用函数失败。首先创建一个js(bus.js) 文件，导出vue 对象。兄弟1调用兄弟2函数。
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
08-27
Vue 中的 $emit 与 $on 父子组件与兄弟组件之间的通信方式 在 Vue 中，$emit 与 $on 是两个非常重要的函数，它们用于实现组件之间的...通过 props、$emit 和 $on，我们可以轻松地实现父子组件和兄弟组件之间的通信。
vu e父子组件传值$emit
最新发布
08-30
在Vue中，可以通过使用$emit和$on方法来实现父子组件之间的数据传输。通过$emit方法，子组件可以将数据发送给父组件，而通过$on方法，父组件可以监听并接收子组件发送的数据。 具体来说，子组件可以在需要传递数据...
vue 兄弟组件传值($$post,$$on,off)事件解绑
周家大小姐
04-22 411
父组件: <el-col :span="10" style="margin-bottom: 0"> <el-card shadow="never"> <section-title text="团队人员" style="padding: 0 0 12px 0"/> <task-allo...
兄弟之间传参——$emit与$on共同使用
qq_30541261的博客
12-12 337
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-equiv...
vue 探讨同级组件间值的传递（$on,$emit的综合运用）
sennyla的博客
02-08 3831
想法：最近在做一个数据处理分析的系统，页面比较多，一些共用的功能也比较多，于是想起了组件化开发，想着一个组件封装好了就可以在项目的各个地方直接引入，无需再次重复编写。举例：头部的导航栏抽出，登录模块抽出，登录按钮存放在头部导航栏里，点击按钮的时候显示/隐藏登录模块，（因登录模块在后台页面里的某个地方将再次需要，只是调起的方式不一样）。一开始登录模块默认隐藏状态，点击登录按钮时设置一个变量存放点击的...
Vue 用$emit与$on来进行兄弟组件之间的数据传输通信
weixin_61945023的博客
07-22 712
Vue 用$emit与$on来进行兄弟组件之间的数据传输通信
vue 兄弟组件之间传数据之$emit 和 $on 组件通信
scorpio的世界
05-09 1424
Vue2-单一事件管理组件通信 //准备一个空的实例对象 var Event = new Vue(); //组件A var A = { template: ` 我是A组件的数据->{{a}} `
vue兄弟组件通信问题：$emit和$on
weixin_34226706的博客
02-02 1348
在前端，不管我们做什么样的业务和功能，都不会离开页面之间的通信问题，在pc端是这样，在移动端更需要解决页面之间的通信问题。今天我们来看看Vue的通信方法一----事件总线。在简单的场景下，可以使用一个空的 Vue 实例作为事件总线，具体的官方文档可看非父子组件通信 。官方文档很简洁，但是像我这种菜鸟看的是一脸懵逼，官方的例子也没有(估计是认为太简单了
vue中子父组件传值使用$emit，$on，$off
杨欢博的博客
01-10 1201
子组件可以使用 $emit,让父组件监听到自定义事件 。 vm.$emit( event, arg ); //触发当前实例上的事件,arg是传递给父组件的参数 vm.$on( event, fn );//监听event事件后运行 fn vue也实现了观察者模式，提供了订阅消息，发布消息，注销消息等方法 $on(type, fn) 订阅消息方法 type:消息名称， fn:消息回调函数，参数是由$emit方法传递的 $emit(type, ...args) 发布消息方法 type:消息名称 .
vue中，监听路由的变化 & 兄弟组件传值过程（创建bus中间件）——vue中$emit触发的事件，$on 第一次监听不到数据，利用eventBus解决，并进行页面动态响应
weixin_44867717的博客
07-03 1570
vue知识
on与$emit传值详细介绍
weixin_42489380的博客
09-24 711
$on与on与on与 $emit传值详细介绍 1.on和on和on和emit兄弟传值之间需要一个中间文件来进行传值，一般来说我们需要创建一个js文件来输出一个Vue的实例，然后传值或者接受值的组件里面都要引入这个文件，这样就显得很麻烦 我们可以通过把他挂在到prototype上面，就能够直接使用了 Vue.prototype.bus = new Vue（） //在入口文件上引入 main.js 使用的时候可以通过 this.bus.emit()∣∣this.bus.emit() || this.
vue中$emit传递多个参数
热门推荐
saltlike的博客
10-13 2万+
$emit传递一个参数的情况 //child组件，在子组件中触发事件 this.$emit('handleFather', param) //father组件，在父组件中引用子组件 <child @handleFather="handleFather"></child> //或者 //<child @handleFather="handleFather($event)"></child> <script> export default
$emit传递多个参数的方法
12-09 8004
$emit传递多个参数时子组件：this.$emit('closeChange',false,true)。 父组件： <posilCom @closeChange="closeCom(arguments)"> //自动组成：数组形式 closeCom(msg)｛ this.msg1 = msg[0]; this.msg2 = msg[1]｝
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值