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

最新推荐文章于 2024-01-08 14:23:58 发布

Katto_Cara

最新推荐文章于 2024-01-08 14:23:58 发布

阅读量987

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Katto_Cara/article/details/130424875

版权

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

解决方法：

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

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

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Katto_Cara

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue组件递归后$emit传值失效的问题

今天在画一个知识点章节树形结构的页面用到了递归组件，但是遇到了一个问题，就是点击二级章节的时候（递归的二级章节）会出现。但是阻止冒泡了以后，想把点击拿到的数据传递给父组件的时候，发现this.$emit方法好像失效了。解决方法：给递归的子组件加上 v-on="$listeners"冒泡问题：vue可以用给click事件添加 .stop 阻止冒泡。事件, 点击一次，会把其一级章节也打印出来。
复制链接

扫一扫

vue+element el-menu递归多层菜单$emit事件失效

周家大小姐

07-19

1147

父组件  <left-menu @handleLeftMenu='handleLeftMenu' :menuList='menuList' /> import LeftMenu from '@/components/leftMenu' data() { return { currentComponent: 'Dic', menuList: [ .

子组件递归调用无法emit触发传值

drunk2的博客

04-18

933

子组件递归的时候，我向父组件进行了emit事件触发传值，但是并没有触发成功子组件封装了一个递归组件，所以给父组件传值的时候只用最外层点击的值能传给父组件，递归调用的部分不行，后来查了好久发现，递归调用子组件时$emit方式不适用，没法通过这种方法传值给父组件。在递归组件中，子组件会会自己调用自己，那么在递归组件中用$emit回传的父组件不一定是真正的父组件，在这种情况下，可以使用vue一个单独开辟的文件store/index.js存储数据，不受多级调用的影响，即在任何地方都能拿到里面的值。 ...

1 条评论您还未登录，请先登录后发表或查看评论

vue3使用$emit【defineEmits】

qq_45487080的博客

05-05

6055

vue3.2使用emit【defineEmits】组件传值

Vue中递归组件时的阻止冒泡事件和$emit失效问题解决

weixin_43120290的博客

05-31

2897

今天在写一个侧边栏时，用到了递归组件，代码如下 <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

Vue $emit()不能触发父组件方法的原因及解决

12-28

$emit传入的事件名称只能使用小写，不能使用大写的驼峰规则命名如果修改后还是不行的话，就改用： this.$parent.Event (Event为父组件中的自定义方法) 补充知识：Vue.js 使用 $emit 触发事件填坑 vue的组件内触发外部事件不起作用 vue的组件内触发自定义事件（发外部事件）不起作用今天学习vue的自定义组件功能，在组件内部触发一个事件，在使用组件的地方使用v-on绑定这个事件，然而触发一直不生效，检查了很多遍的代码都没看出什么问题，代码如下： <button v-on:click=IncrHandle>增加</bu

vue3中组件递归，子组件emit事件失效解决办法

最新发布

qq_52273262的博客

01-08

1922

在嵌套的子组件加上emit事件的监听，缺点就是控制台有警告。用vuex / pinia 代替父子通信。

vue 组件递归后$emit传值失效的问题（这里提供三个解决思路，建议使用最后一个）

weixin_44132285的博客

09-16

8189

vue 组件递归后$emit传值失效的问题（这里提供三个解决思路，建议使用最后一个）分析原因 1.首先造成传值失效的问题是组件递归后事件传递不到上层。所以造成的问题是在递归组件的第二层里面，监听不到当前事件。出现的现象 2.造成的现象是我点击递归出来的子菜单的时候，父级组件拿不到点击获取的值，第一次点击渲染的值可以获取到解决问题的方法 1.可以点击的时候将值存储再vuex里面点击的时候在父级页面获取到vuex里面存储的值弊端：点击完页面刷新后，vuex里面的值会消失，影响页面功能（非必要不选择）；

Vue子组件递归导致this.$emit失效，父组件监听不到

qq_53121751的博客

10-27

2193

Vue子组件递归导致this.$emit失效，父组件监听不到

vue+el-menu递归导致$emit失效

real_xiaobai的博客

09-29

397

一、父组件 <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="

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

2320

组件视图样式当我们做多级菜单或者权限列表管理的时候，大多会采用树形结构来实现，有的朋友为了省事，不想多费脑力，多费时间，直接几层for循环就做了个差不多的属性组件，更省事的朋友直接拿ElementUI中的Tree树形组件来完成需求，这时，稍微有点要求的产品就来要求了：不行，这组件样式都是竖着的，要是权限列表多了，这还了得？改。这里笔者仿照ElementUI的风格，自定义了个简单的树形组件，先看样式：递归组件说明什么是递归组件？简单的说就是组件自己调用自己。有些朋友可能就懵了，哎呦卧槽，组件还能调

5 Vue＋html css 问题（西安10.9）

harvestUachieve的博客

10-10

1271

数据响应式原理的核心就是采用了数据劫持结合发布者-订阅者模式的方式来实现数据的响应式,通过Object.defineProperty()对数据进行拦截，把这些属性全部转换成getter/setter，get（）方法可以读取数据、收集依赖，set（）方法可以改写数据，在数据变动时会对数据进行比较，如果数据发生了变化，会发布消息通知订阅者，触发监听回调，更新视图。watch监听的数据必须是data中声明过或父组件传递过来的props中的数据，当数据变化时，触发监听器。的操作，比如改变宽高，隐藏节点等。

阿里前端常考vue面试题汇总

bb_xiaxia1998的博客

02-27

287

题目分析回答范例实现我们可以像下面这样简单实现和，从而辨别两者不同如何在组件中批量使用Vuex的getter属性使用mapGetters辅助函数, 利用对象展开运算符将getter混入computed 对象中 Vue组件之间通信方式有哪些组件传参的各种方式组件通信常用方式有以下几种根据组件之间关系讨论组件通信最为清晰有效1. 父子组件通信父组件模板: 子组件模板: 回调函数（callBack）父传子：将父组件里定义的作为传入子组件子组件向父组件通信父组件模板: 子组件模板: 2. provide

Vue $emit()不能触发父组件方法，Vue子组件向父组件使用自定义事件$emit传递数据无效的坑

m0_61672533的博客

01-03

1109

Vue子组件向父组件使用自定义事件$emit传递数据无效的坑

vue emit失效原因

qq_25968127的博客

09-28

1065

vue emit失效原因记录: emit的事件名中有大写字母组件的父子关系不对。可能父级是循环产生的，emit事件没发确定触发那个父级的事件。加ref解决

子组件往父组件传值失败的三个问题

04-24

3672

第一个问题：传入的事件名只能是小写不可以是驼峰命名法第二个问题：就是vue2写法：this.$emit("事件名"，'传给父组件的数据') 但是vue3不能像上面了 vue3写法： this.$parent.$emit("事件名"，'传给父组件的数据') 第三个问题是用$emit()的时候是一个递归组件有时候用不了有时候能用给递归组件加上v-on="$listeners" 问题就会解决 ...

vue传参跳转页面数据消失

Zt0118的博客

03-24

358

vue传参跳转页面数据消失

this.$emit方法无效的原因