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

最新推荐文章于 2024-06-21 08:47:39 发布
最新推荐文章于 2024-06-21 08:47:39 发布
阅读量568 收藏
点赞数
文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/versionli/article/details/83177864
版权

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

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

在A组件和B组件

A组件里触发一个函数

B组件

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

如：

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

引入

 

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

付费解决前端问题：

发奋图强_lee
关注
Vue.js 中的 $emit 和 $on 方法有什么区别？
徐师兄的博客
06-07 2387
emit 和on方法是Vuejs中用于实现组件间通信的两个重要方法。on 方法是 Vue.js 中用于实现组件间通信的两个重要方法。on方法是Vuejs中用于实现组件间通信的两个重要方法。emit 方法用于触发自定义事件并向父组件或祖先组件派发该事件，而on方法用于监听自定义事件并在事件触发时执行回调函数。on 方法用于监听自定义事件并在事件触发时执行回调函数。on方法用于监听自定义事件并在事件触发时执行回调函数。emit 方法必须在组件内部使用，而on。
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】 $on、$once、$off、$emit 事件监听方法详解以及项目实战
最新发布
工作的日常记录和平凡的生活分享
06-21 2149
vm.$on是Vue实例用来监听自定义事件的方法。它允许开发者在Vue实例上注册事件监听器，当事件被触发时，指定的回调函数会被执行。
Vuejs 用$emit 与 $on 来进行兄弟组件之间的数据传输
xiaokanfuchen86的博客
04-22 306
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Vue2-单一事件管理组件通信</title> <script src="vue.js"></script> <scri...
VUE平行组件之间的传值--$emit和$on的使用
范范范国超的博客
01-15 526
需求：有三个组件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 309
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中组件传值$on和$emit的编写
Asuria
07-27 832
这是关于实现$on和$emit以及$off的js文件 因为每次实现这些方法都要实例vue，这使一些vue不需要的功能也一起带进来了，不利于优化。 let callbackMap = {}; export default { // 添加事件监听 $on: function(eventName, callback){ // 按名字保存所有的回调函数 ...
解决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中$refs, $emit, $on, $once, $off的使用详解
10-16
在Vue.js框架中，$refs, $emit, $on, $once, 和 $off 是用于组件间通信的重要机制。下面将分别对它们进行详细的解释和示例说明。 1. **$refs** `$refs` 是 Vue 提供的一种机制，允许父组件引用其子组件实例。在...
vuejs 传参 向 子组件 父组件_子组件向父组件传值（$emit）
weixin_42512474的博客
12-29 352
# vue中子组件向父组件传值### 1、定义子组件```子组件:{{childValue}}export default {data () {return {childValue: '我是子组件的数据'}},methods: {childClick () {// childByValue是在父组件on监听的方法// 第二个参数this.childValue是需要传的值this.$emit('ch...
vue 探讨同级组件间值的传递（$on,$emit的综合运用）
sennyla的博客
02-08 3831
想法：最近在做一个数据处理分析的系统，页面比较多，一些共用的功能也比较多，于是想起了组件化开发，想着一个组件封装好了就可以在项目的各个地方直接引入，无需再次重复编写。举例：头部的导航栏抽出，登录模块抽出，登录按钮存放在头部导航栏里，点击按钮的时候显示/隐藏登录模块，（因登录模块在后台页面里的某个地方将再次需要，只是调起的方式不一样）。一开始登录模块默认隐藏状态，点击登录按钮时设置一个变量存放点击的...
vue2开发中实例事件总结($on,$once,$off,$emit,$root,$refs,$parent 的使用)
知其白，守其黑；和其光，同其尘。
01-01 1899
1.实例事件就是在构造器外部调用构造器内部的数据。 2.使用场景:比如构造器已经有一个加的方法,现在还要做一个减的方法,而我又不想动构造器里面的信息,那就可以使用实例事件了. 操作如下: 与on对应的还有一个on对应的还有一个on对应的还有一个once,上述代码只改一个单词$once app.$once('reduce',function(){ console.log("减...
vue $emit $on 之兄弟间通信
前端小知识
01-21 658
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中$emit传递多个参数
热门推荐
saltlike的博客
10-13 2万+
$emit传递一个参数的情况 //child组件，在子组件中触发事件 this.$emit('handleFather', param) //father组件，在父组件中引用子组件 <child @handleFather="handleFather"></child> //或者 //<child @handleFather="handleFather($event)"></child> <script> export default
vue 兄弟组件之间传数据之$emit 和 $on 组件通信
scorpio的世界
05-09 1424
Vue2-单一事件管理组件通信 //准备一个空的实例对象 var Event = new Vue(); //组件A var A = { template: ` 我是A组件的数据->{{a}} `
Vue组件事件：$emit与Event Bus($on)实战解析
"本文主要介绍在Vue.js中，组件之间的事件触发($emit)以及如何使用Event Bus($on)实现跨组件通信。这两种方法在处理组件间交互时非常常见，特别是当需要传递信息或触发功能时。" 在Vue.js中，组件间的通信是一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值