vue组件递归后$emit传值失效的问题

最新推荐文章于 2024-01-08 14:23:58 发布
最新推荐文章于 2024-01-08 14:23:58 发布
阅读量1k 收藏
点赞数 2
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Katto_Cara/article/details/130424875
版权

今天在画一个知识点章节树形结构的页面用到了递归组件，但是遇到了一个问题，就是点击二级章节的时候（递归的二级章节）会出现冒泡事件, 点击一次，会把其一级章节也打印出来。

解决方法：

冒泡问题：vue可以用给click事件添加 .stop 阻止冒泡。

但是阻止冒泡了以后，想把点击拿到的数据传递给父组件的时候，发现this.$emit方法好像失效了。

解决方法：给递归的子组件加上 v-on="$listeners"  

Katto_Cara
关注
vue+element el-menu递归多层菜单$emit事件失效
周家大小姐
07-19 1161
父组件 <!-- 左边菜单 --> <left-menu @handleLeftMenu='handleLeftMenu' :menuList='menuList' /> import LeftMenu from '@/components/leftMenu' data() { return { currentComponent: 'Dic', menuList: [ .
自定义ElementUI风格树形组件，详解递归组件的使用及事件数据传递，视图更新等问题
小圣贤君的博客
09-22 2332
组件视图样式 当我们做多级菜单或者权限列表管理的时候，大多会采用树形结构来实现，有的朋友为了省事，不想多费脑力，多费时间，直接几层for循环就做了个差不多的属性组件，更省事的朋友直接拿ElementUI中的Tree树形组件来完成需求，这时，稍微有点要求的产品就来要求了：不行，这组件样式都是竖着的，要是权限列表多了，这还了得？改。 这里笔者仿照ElementUI的风格，自定义了个简单的树形组件，先看样式： 递归组件说明 什么是递归组件？简单的说就是组件自己调用自己。有些朋友可能就懵了，哎呦卧槽，组件还能调
vue3中组件递归，子组件emit事件失效解决办法
最新发布
qq_52273262的博客
01-08 2047
在嵌套的子组件加上emit事件的监听，缺点就是控制台有警告。用vuex / pinia 代替父子通信。
vue 组件递归后$emit传值失效的问题（这里提供三个解决思路，建议使用最后一个）
weixin_44132285的博客
09-16 8279
vue 组件递归后$emit传值失效的问题（这里提供三个解决思路，建议使用最后一个） 分析原因 1.首先造成传值失效的问题是组件递归后事件传递不到上层。所以造成的问题是在递归组件的第二层里面，监听不到当前事件。 出现的现象 2.造成的现象是我点击递归出来的子菜单的时候，父级组件拿不到点击获取的值，第一次点击渲染的值可以获取到 解决问题的方法 1.可以点击的时候将值存储再vuex里面 点击的时候在父级页面获取到vuex里面存储的值 弊端：点击完页面刷新后，vuex里面的值会消失，影响页面功能（非必要不选择）；
Vue $emit()不能触发父组件方法的原因及解决
10-15
主要介绍了Vue $emit()不能触发父组件方法的原因及解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue子组件递归导致this.$emit失效，父组件监听不到
qq_53121751的博客
10-27 2206
Vue子组件递归导致this.$emit失效，父组件监听不到
vue+el-menu递归导致$emit失效
real_xiaobai的博客
09-29 419
一、父组件 <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="
子组件递归调用无法emit触发传值
drunk2的博客
04-18 939
子组件递归的时候，我向父组件进行了emit事件触发传值，但是并没有触发成功 子组件封装了一个递归组件，所以给父组件传值的时候只用最外层点击的值能传给父组件，递归调用的部分不行，后来查了好久发现，递归调用子组件时$emit方式不适用，没法通过这种方法传值给父组件。 在递归组件中，子组件会会自己调用自己，那么在递归组件中用$emit回传的父组件不一定是真正的父组件，在这种情况下，可以使用vue一个单独开辟的文件store/index.js存储数据，不受多级调用的影响，即在任何地方都能拿到里面的值。 ...
Vue中递归组件时的阻止冒泡事件和$emit失效问题解决
weixin_43120290的博客
05-31 2940
今天在写一个侧边栏时，用到了递归组件，代码如下 <template> <div> <ul class="rightList-container"> <li v-for="(item, i) in list" :key="i" @click="handleClick(item)"> <span :class="{ active: item.isSelected }">{{ item.name }}</sp
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_...
5 Vue＋html css 问题（西安10.9）
harvestUachieve的博客
10-10 1293
数据响应式原理的核心就是采用了数据劫持结合发布者-订阅者模式的方式来实现数据的响应式,通过Object.defineProperty()对数据进行拦截，把这些属性全部转换成getter/setter，get（）方法可以读取数据、收集依赖，set（）方法可以改写数据，在数据变动时会对数据进行比较，如果数据发生了变化，会发布消息通知订阅者，触发监听回调，更新视图。watch监听的数据必须是data中声明过或父组件传递过来的props中的数据，当数据变化时，触发监听器。的操作，比如改变宽高，隐藏节点等。
2023年最新的Vue全套面试题（含答案）
热门推荐
xm1037782843的博客
03-06 14万+
前端Vue面试题 最新面试题 最全的面试题vue
Vue $emit()不能触发父组件方法，Vue子组件向父组件使用自定义事件$emit传递数据无效的坑
m0_61672533的博客
01-03 1124
Vue子组件向父组件使用自定义事件$emit传递数据无效的坑
vue emit失效原因
qq_25968127的博客
09-28 1075
vue emit失效原因记录: emit的事件名中有大写字母 组件的父子关系不对。可能父级是循环产生的，emit事件没发确定触发那个父级的事件。加ref解决
vue传参跳转页面数据消失
Zt0118的博客
03-24 366
vue传参跳转页面数据消失
this.$emit方法无效的原因
weixin_44294658的博客
08-04 2万+
this.$emit无效的问题 开发过程汇总突然遇到this.$emit无法将事件发布出去，原因查找发现是使用了驼峰命名法，导致方法不能被监听到。点击查看vue官方文档说明，最神奇的是并不是左右的emit都失效，只是有些emit的方法名在特定情况下失效。 解决方案 使用-连接，比如： this.$emit(‘my-method’); 使用this.$parent.方法名调用 ...
Vue3父子组件emit参数传递（解决Vue2this.$emit无效问题）
韦_恩的博客
01-30 2万+
之前写了一篇Vue3路由跳转问题的博客，发现还是有很多同学对基本的使用改变还没有了解，于是我就顺道把常用的组件间传递的方式也写一下吧....... 注意的是： 1.Vue3中不在强调this的使用，可以说你在setup中完全不能用this，不像Vue2中把全部的内容都集成到this中。 2.Vue3现在由于compositionAPI的方式可以说是弱化了Vuex的存在（当然Vuex现在可以用没什么变化）。 3.如果您有Vue2的开发经历，用Vue3也不会特别陌生，会很快上手。 目录 1.解决.
Vue子组件向父组件使用自定义事件$emit传递数据无效的坑
coderYYY的博客
04-01 7050
子级向父级传递—自定义事件 当子组件需要向父组件传递数据时，用到的是自定义事件 自定义事件的流程： 在子组件中，通过$emit()来触发事件。 在父组件中，通过v-on来监听子组件事件。 我们来看一个简单的例子： 我们之前做过一个两个按钮+1和-1，点击后修改counter。 我们整个操作的过程还是在子组件中完成，但是之后的展示交给父组件。 这样，我们就需要将子组件中的counter，传给父组件的某个属性，比如total。 <!--父组件模板--> <div i
vue3$emit传值
09-04
在Vue 3中，可以通过使用`$emit`方法来实现组件之间的传值。与Vue 2相比，Vue 3中的`$emit`的用法是一样的。 在父组件中，可以通过在子组件上使用`@deleteArticle`来监听子组件触发的事件。例如，在父组件中的模板...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值