vue.js 运用$emit 与 $on 在组件中传递数据

最新推荐文章于 2022-06-03 15:37:25 发布
原创 最新推荐文章于 2022-06-03 15:37:25 发布 · 628 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript

本文介绍了一种在前端开发中实现组件间数据传递的方法，通过引入common.js文件，使得A组件可以影响B组件的状态，如显示与隐藏。同时，讨论了如何通过事件传递机制，使子组件能够与父组件进行交互，完成组件关闭等操作。

目的：把A组件的数据传到B组件里

首先两个组件都要引入一个 common.js,内容如下图

在A组件和B组件

A组件里触发一个函数

B组件

这样就可以在A组件的操件，影响B组件的隐藏和显示，等等 

如：

点”确定“或”取消“，把事件传给父组件，让父组件来关闭这个子组件。

引入

 

  ================================================

付费解决前端问题：

vue 探讨同级组件间值的传递（$on,$emit的综合运用）
sennyla的博客
02-08 3923
想法：最近在做一个数据处理分析的系统，页面比较多，一些共用的功能也比较多，于是想起了组件化开发，想着一个组件封装好了就可以在项目的各个地方直接引入，无需再次重复编写。举例：头部的导航栏抽出，登录模块抽出，登录按钮存放在头部导航栏里，点击按钮的时候显示/隐藏登录模块，（因登录模块在后台页面里的某个地方将再次需要，只是调起的方式不一样）。一开始登录模块默认隐藏状态，点击登录按钮时设置一个变量存放点击的...
[vue] 全局事件总线 this.$bus.$emit this.$bus.$on ，可以实现任意组件间通信
qq_14993591的博客
11-09 6041
全局事件总线原理分析 前提：x是个组件，不属于任何一个组件 要求：A组件想要收到别的组件给的信息 在A组件里给x绑定个自定义事件demo,对应的回调函数就留在A中 D组件想给A传点数据，就可以这样做： 在D组件里，写点代码触发x身上的demo事件，并且传点数据过去（666）， x身上的demo事件被触发了，demo事件的回调函数就得执行，而这个回调函数在A组件里面，那之前D组件传的数据666，就在A组件里面 要求：B组件想收到点别的组件传的数据， 在B组件里写点代码，给x组件绑定个事件test,回调函
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 352
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Vue2-单一事件管理组件通信</title> <script src="vue.js"></script> <scri...
VUE平行组件之间的传值--$emit和$on的使用
范范范国超的博客
01-15 588
需求：有三个组件A，B，C，需要把组件A和组件B中的数据传到C，并且组件ABC是平行关系。 实现的思路是：创建一个空的vue实例，把A和B的数据通过$emit获取，然后C组件通过$on接收。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l...
【vue】用$emit与$on来进行数据传输通信
michiko98的博客
07-19 358
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Vue2-单一事件管理组件通信</title> <script src="vue.js"></script> <script type="text/javascript">
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
10-18
通过上述代码示例和解释，我们可以了解到如何在Vue.js中正确地使用$on和$emit方法来实现父子组件间自定义事件的通信。当遇到父组件无法监听子组件事件的问题时，可以通过在子组件内部使用$parent.$emit来解决。这样...
解决vue bus.$emit触发第一次$on监听不到问题
10-15
这可以通过$nextTick函数来实现，该函数允许将回调延迟到下次DOM更新循环之后执行，从而确保在数据传递之前子组件已经被创建。 在实际代码中，可以通过将bus.$emit放在this.$nextTick中来保证事件监听器已经注册，...
面试官-Vue.js 中的 $emit 和 $on 方法有什么区别？.pdf
08-05
在 Vue.js 中，$emit 和 $on 方法是两个常用的方法，用于实现组件间的通信。它们可以让我们在一个组件中触发一个自定义事件，并在另一个组件中监听这个事件，从而实现组件间的数据传递和交互。 $emit 方法 $emit ...
对vue.js中this.$emit的深入理解
10-18
在Vue.js中，`this.$emit` 是一个非常重要的功能，它允许子组件与父组件进行通信，将数据或事件传递回上层。通过深入理解`this.$emit`的工作原理，开发者可以更好地构建复杂的组件结构，并实现灵活的数据交互。下面...
Vue中组件传值$on和$emit的编写
Asuria
07-27 896
这是关于实现$on和$emit以及$off的js文件 因为每次实现这些方法都要实例vue，这使一些vue不需要的功能也一起带进来了，不利于优化。 let callbackMap = {}; export default { // 添加事件监听 $on: function(eventName, callback){ // 按名字保存所有的回调函数 ...
vuejs 传参 向 子组件 父组件_子组件向父组件传值（$emit）
weixin_42512474的博客
12-29 394
# vue中子组件向父组件传值### 1、定义子组件```子组件:{{childValue}}export default {data () {return {childValue: '我是子组件的数据'}},methods: {childClick () {// childByValue是在父组件on监听的方法// 第二个参数this.childValue是需要传的值this.$emit('ch...
vue2开发中实例事件总结($on,$once,$off,$emit,$root,$refs,$parent 的使用)
知其白，守其黑；和其光，同其尘。
01-01 2080
1.实例事件就是在构造器外部调用构造器内部的数据。 2.使用场景:比如构造器已经有一个加的方法,现在还要做一个减的方法,而我又不想动构造器里面的信息,那就可以使用实例事件了. 操作如下: 与on对应的还有一个on对应的还有一个on对应的还有一个once,上述代码只改一个单词$once app.$once('reduce',function(){ console.log("减...
vue $emit $on 之兄弟间通信
前端小知识
01-21 704
Event.$emit('eventName',this.msg);　　　 发送数据，第一个参数是事件名，第二个参数是传出的数据 Event.$on('eventName',function(msg){}）　　接收数据，第一个参数是事件名，要个$emit的第一个参数保持一致，第二个是传入的数据，在方法里可以将传入的数据进行操作 首先要创建一个.js文件创建一个vue实例，例如：bus.js import Vue from 'vue' export var bus = new Vu...
Vue $on、$emit的实现
meng_xiaoxiao的博客
06-03 1205
1、$on的用法：接收2个参数，返回对象的本身； 第一个参数是字符串或者字符串数组。 第二参数是回调函数。 2、$emit的用法：接收1+n个参数，返回对象的本身； 第一个参数是字符串； 第n参数是作为回调函数的参数。...
vue 兄弟组件之间传数据之$emit 和 $on 组件通信
scorpio的世界
05-09 1483
Vue2-单一事件管理组件通信 //准备一个空的实例对象 var Event = new Vue(); //组件A var A = { template: ` 我是A组件的数据->{{a}} `
Vue $on的用法
wnk1997的博客
02-10 8614
转载：https://www.cnblogs.com/jin-zhe/p/13100194.html ue中使用 $emit(eventName) 触发事件，使用 $on(eventName) 监听事件 $emit(eventName) 触发当前实例上的事件，附加参数都会传给监听器回调。 on(eventName)监听当前实例上的自定义事件。事件可以由vm.on(eventName) 监听当前实例上的自定义事件。事件可以由 vm.on(eventName)监听当前实例上的自定义事件。事件可以由vm.emi
vue中的$on与$emit
qq_42526440的博客
03-10 1273
们再项目中经常会遇到这么些情况，兄弟组件之间的传值。 比如说一个组件内的按钮触发了兄弟组件的<audio>标签，从而播放背景音乐。另一个组件触发了暂停，从而暂停背景音乐。 这个时候就会用到$on和$emit了。 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 $emit 1、this.$emit（‘自定义事件名’,要传送的数据）； 2、触发当前实例上的事件，要传递的数据会传给监听器； $on 1、VM.$on('事件名',callback) ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值