vue 组件递归后 $emit事件失效

最新推荐文章于 2024-05-28 01:01:01 发布
原创 最新推荐文章于 2024-05-28 01:01:01 发布 · 2.1k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js

本文探讨了在Vue组件中，子组件递归使用$emit时未生效的问题，通过引入`v-bind=$attrs`和`v-on=$listeners`解决，揭示了组件通信的深层理解。

父组件代码：
在这里插入图片描述
子组件：
在这里插入图片描述
然后发现子组件递归的组件里，使用this.$emit没有生效，一脸懵逼。
最后在子组件里的递归组件上加上
v-bind="$attrs" v-on="$listeners"，又一脸懵逼的解决了
在这里插入图片描述

兄弟组件传值，$emit方法无效的问题解决
xiubinxu的博客
01-26 779
A组件(是个弹框组件)
vue+element el-menu递归多层菜单$emit事件失效
周家大小姐
07-19 1386
父组件 <!-- 左边菜单 --> <left-menu @handleLeftMenu='handleLeftMenu' :menuList='menuList' /> import LeftMenu from '@/components/leftMenu' data() { return { currentComponent: 'Dic', menuList: [ .
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
12-11
最近学习vuejs看例子中用$on无法监听子组件$emit触发事件： 使用版本 vue.js 2.2.5 参考文献 1.vuejs API 2.解决实例 问题分析 1.之前写的自定义组件事件触发为this.$emit(“myclick”,this.todo.text);，这样this指的是todo-item的每一项，而最后vm.$on监听的是app组件，也就出说监听的是父节点，而触发的是子节点，故监听不到这个事件的。 解决思路 1.将触发事件放在父节点上触发，就可以监听到触发的事件了，即this.$parent.$emit(“myclick”,this.todo.text);，这样即可以在v
Vue3父子组件emit参数传递（解决Vue2this.$emit无效问题）
韦_恩的博客
01-30 2万+
之前写了一篇Vue3路由跳转问题的博客，发现还是有很多同学对基本的使用改变还没有了解，于是我就顺道把常用的组件间传递的方式也写一下吧....... 注意的是： 1.Vue3中不在强调this的使用，可以说你在setup中完全不能用this，不像Vue2中把全部的内容都集成到this中。 2.Vue3现在由于compositionAPI的方式可以说是弱化了Vuex的存在（当然Vuex现在可以用没什么变化）。 3.如果您有Vue2的开发经历，用Vue3也不会特别陌生，会很快上手。 目录 1.解决.
vue3中组件递归，子组件emit事件失效解决办法
qq_52273262的博客
01-08 3003
在嵌套的子组件加上emit事件的监听，缺点就是控制台有警告。用vuex / pinia 代替父子通信。
vue 组件递归后$emit传值失效的问题（这里提供三个解决思路，建议使用最后一个）
weixin_44132285的博客
09-16 9248
vue 组件递归后$emit传值失效的问题（这里提供三个解决思路，建议使用最后一个） 分析原因 1.首先造成传值失效的问题是组件递归后事件传递不到上层。所以造成的问题是在递归组件的第二层里面，监听不到当前事件。 出现的现象 2.造成的现象是我点击递归出来的子菜单的时候，父级组件拿不到点击获取的值，第一次点击渲染的值可以获取到 解决问题的方法 1.可以点击的时候将值存储再vuex里面 点击的时候在父级页面获取到vuex里面存储的值 弊端：点击完页面刷新后，vuex里面的值会消失，影响页面功能（非必要不选择）；
this.$on和this.$emit失效
08-20
- *2* *3* [Vue子组件递归导致this.$emit失效，父组件监听不到](https://blog.csdn.net/qq_53121751/article/details/127549279)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_...
自定义ElementUI风格树形组件，详解递归组件的使用及事件数据传递，视图更新等问题
小圣贤君的博客
09-22 2501
组件视图样式 当我们做多级菜单或者权限列表管理的时候，大多会采用树形结构来实现，有的朋友为了省事，不想多费脑力，多费时间，直接几层for循环就做了个差不多的属性组件，更省事的朋友直接拿ElementUI中的Tree树形组件来完成需求，这时，稍微有点要求的产品就来要求了：不行，这组件样式都是竖着的，要是权限列表多了，这还了得？改。 这里笔者仿照ElementUI的风格，自定义了个简单的树形组件，先看样式： 递归组件说明 什么是递归组件？简单的说就是组件自己调用自己。有些朋友可能就懵了，哎呦卧槽，组件还能调
vue3中的emit()
最新发布
04-16
此外，引用[3]提到了在递归组件中使用emit可能失效的情况，可能是因为事件未正确冒泡或组件结构问题。 接下来，我需要回顾之前对用户问题的回答，确保内容一致且没有遗漏。之前的回答中，我详细讲解了defineEmits的...
23 vue3面试重难点复习：响应式原理、特点、8大生命钩子、data数据定义、组件、全家桶
c5dnuser的博客
05-28 888
Vue核心知识点摘要 本文系统梳理了Vue框架的核心技术点，包括响应式原理、组件通信、性能优化等关键内容。Vue采用MVVM模式实现数据双向绑定，Vue2使用Object.defineProperty实现响应式，Vue3升级为更高效的Proxy方案。文章详细解析了computed和watch的区别、组件生命周期、v-model原理等核心概念，并提供了响应式系统底层实现代码示例。 重点内容包括： 响应式系统实现：依赖收集(track)与触发(trigger)机制 组件通信方式：props/emit、事件总线、
Vue $emit()不能触发父组件方法的原因及解决
10-15
主要介绍了Vue $emit()不能触发父组件方法的原因及解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
this.$emit方法无效的原因
热门推荐
weixin_44294658的博客
08-04 3万+
this.$emit无效的问题 开发过程汇总突然遇到this.$emit无法将事件发布出去，原因查找发现是使用了驼峰命名法，导致方法不能被监听到。点击查看vue官方文档说明，最神奇的是并不是左右的emit都失效，只是有些emit的方法名在特定情况下失效。 解决方案 使用-连接，比如： this.$emit(‘my-method’); 使用this.$parent.方法名调用 ...
vue组件递归后$emit传值失效的问题
Katto_Cara的博客
04-28 1246
今天在画一个知识点章节树形结构的页面用到了递归组件，但是遇到了一个问题，就是点击二级章节的时候（递归的二级章节）会出现。但是阻止冒泡了以后，想把点击拿到的数据传递给父组件的时候，发现this.$emit方法好像失效了。解决方法：给递归的子组件加上 v-on="$listeners"冒泡问题：vue可以用给click事件添加 .stop 阻止冒泡。事件, 点击一次，会把其一级章节也打印出来。
vue $emit不起用 ，父组件监听不到？？
一撇一画的博客
09-09 1825
<template> <div class="flex flex-wrap w-100 bg-white " > <div v-for="(item,index) in list" :key="index" class="p-1" > <span @click="checkChildren(item)" class="iconfont"> {{item.menuName}}{{i
vue+el-menu递归导致$emit失效
real_xiaobai的博客
09-29 534
一、父组件 <el-menu class="el-menu-vertical-demo"> <menu-tree :menuData="menuList" @getdata="getdata"></menu-tree> </el-menu> 二、子组件 <template> <div> <template v-for="menu in this.menuData"> <el-submenu :key="
vue子组件调用父组件方法$emit没有生效
qq_35567179的博客
09-12 7860
一开始查百度，别人都说 this.$emit(方法名, 参数);里面的方法名不能是驼峰法，试了下不行； 还有说emit不能写在axios里的，于是我拿到外面去了也不行； 最后谷歌查，原来是父组件里的子组件需要注册一下被监听的方法 parent组件 <el-parent> <wx-upload v-on:uploadsuccess="UploadSuccess"></wx-upload> </el-parent> ... <sc
vue.js中this.$emit和this.$parent失效
a983677218的博客
08-29 901
然后就是在子组件中调用父类方法时，如果父类会对传到子类的参数进行修改时候，控制台会报错。建议如果需要修改，则在子组件中定义data对应传进来的参数，并通过watch监听传进来的参数改变data值，这样就不会报错。/> 这样在子组件中才能使用this.$emit（‘sun’,param）,这里sun就是父类的parent方法。在开发过程中偶然遇到在子组件中用this.$emit和this.$parent调用父组件都失效。使用Vue进行组件化开发，少不了组件间的方法调用，和方法传递。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值