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

最新推荐文章于 2024-04-20 08:58:55 发布
最新推荐文章于 2024-04-20 08:58:55 发布
阅读量7.8k 收藏 11
点赞数 8
文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44132285/article/details/120323217
版权

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

分析原因

1.首先造成传值失效的问题是组件递归后事件传递不到上层。所以造成的问题是在递归组件的第二层里面，监听不到当前事件。

出现的现象

2.造成的现象是我点击递归出来的子菜单的时候，父级组件拿不到点击获取的值，第一次点击渲染的值可以获取到

解决问题的方法

1.可以点击的时候将值存储再vuex里面 点击的时候在父级页面获取到vuex里面存储的值

弊端：点击完页面刷新后，vuex里面的值会消失，影响页面功能（非必要不选择）；

2.可以通过$eventBus事件中转的方式解决（没有更好的办法可以选择）

弊端：需要建一个事件中转站，没有事件去触发。

3.可以再递归组件中监听当前事件，只需要在递归组件中添加v-on="$listeners"（最优解）
具体代码如下

父组件

<template>
   <div>
       <NodeTabs @tabChange="tabChange"  :tabData="tabList"></NodeTabs>
   </div>
  </template>

<script>
        import NodeTabs from "@/components/tabList"
    export default {

        data(){
            return {
                tabList:[
                    {
                        tabName:"菜单一",
                        ricid:"xx",
                        datatype:0,
                        children:[
                            {
                                tabName:"菜单二",
                                ricid:"xx"
                            },
                            {
                                tabName:"菜单二222222222222222222.2",
                                ricid:"xx"
                            },
                            {
                                tabName:"菜单1.3",
                                ricid:"xx"
                            }
                        ]
                    },
                    {
                        tabName:"菜单二",
                        ricid:"xx",
                        datatype:'1',
                        children:[
                            {
                                tabName:"菜单二",
                                ricid:"xx"
                            },
                            {
                                tabName:"菜单2.2",
                                ricid:"xx"
                            },
                            {
                                tabName:"菜单2.3",
                                ricid:"xx"
                            },
                            {
                                tabName:"菜单二2.1",
                                ricid:"xx"
                            },
                            {
                                tabName:"菜单2.2",
                                ricid:"xx"
                            },
                            {
                                tabName:"菜单2.3",
                                ricid:"xx"
                            },
                            {
                                tabName:"菜单二",
                                ricid:"xx"
                            },
                            {
                                tabName:"菜单2.2",
                                ricid:"xx"
                            },
                            {
                                tabName:"菜单2.3",
                                ricid:"xx"
                            },
                            {
                                tabName:"菜单二",
                                ricid:"xx"
                            },
                            {
                                tabName:"菜单2.2",
                                ricid:"xx"
                            },
                            {
                                tabName:"菜单2.3",
                                ricid:"xx"
                            }
                        ]
                    },
                    {
                        tabName:"菜单三",
                        ricid:"xx",
                        datatype:0,
                        children:[
                            {
                                tabName:"菜单二",
                                ricid:"xx"
                            },
                            {
                                tabName:"菜单3.2",
                                ricid:"xx"
                            },
                            {
                                tabName:"菜单3.3",
                                ricid:"xx"
                            }
                        ]
                    }
                ],
                currentNodes:{}
            }
        },
        methods:{
            tabChange(val){
                console.log(val,"val_______________")
            }
        },
        components: {NodeTabs},


    }
</script>

子组件（递归组件）

<template>
    <ul class="tab_ctn">
        <li v-for="(item,index) in tabData"  :class="currenClass == index?'active':'liStyle'" :style="item.datatype =='1'?{width:'200px'}:'auto'" @click.stop.prevent="tabChange(item,index,$event)"  @mouseleave="leveTab"  :key="index">
            <div class="p_style">
                <p :title="item.tabName">{{item.tabName}}</p>
                <Icon type="ios-arrow-down"  v-if="item.datatype =='1'"/>
            </div>

            <tab-list v-if="item.children&&currenClass == index &&item.datatype !=='1'"  v-on="$listeners"  :tabData="item.children"></tab-list>

            <ul v-if="item.children&&currenClass == index&&item.datatype =='1' && tabIsow" @mouseleave="leveTab" :style="{width: width}" class="tabSelect" id="tabSelect" style="">
                <li v-for="(item,indexs) in item.children" :key="indexs" @click.stop="tabChange1(item,indexs)" style="text-align: left;" :class="currenClass1 == indexs?'active':''">
                    <p :title="item.tabName">{{item.tabName}}</p>
                </li>
            </ul>
        </li>
    </ul>
</template>

<script>
    export default {
        name: "tab-list",
        data(){
            return{
                tabIsow:true,
                currenClass:0,
                currenClass1:0,
                currenClass2:0,
                width:''
            }
        },
        props: {
            tabData:Array
        },

        methods: {
            tabChange(item,index,e){
                var that = this
                this.currenClass = index;
                this.tabIsow=true
                that.$emit("tabChange",item)
                if(item.children && item.datatype == 1){
                    console.log('Xiala')
                }else{
                    // this.tabChange2(item.children[0],0);
                }
                this.width = e.target.parentElement.offsetWidth + 'px';
            },
            tabChange1(item,index){
                this.currenClass1 = index;
                this.tabIsow=false
                this.$emit("tabChange",item)
                // this.$router.push({name : item.recId});
            },
            tabChange2(item,index){
                this.currenClass2 = index;
                this.$emit("tabChange",item)
                // this.$router.push({name : item.recId});
            },
            leveTab(){
                this.tabIsow=false
            },
//            mouseTab(index){
//                this.currenClass = index;
//                this.tabIsow=true
//            }
        },
    }
</script>

<style scoped>
    ul,li{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .p_style{
        display: flex;
        align-items: center;
        justify-content: center
    }
    .active{
        background:#ffffff !important;
        color: #2d8cf0!important;
        border-bottom:0!important;
        border-left: 1px solid #2d8cf0!important;
        border-right: 1px solid #2d8cf0!important;
        border-top:1px solid #2d8cf0!important;
    }
    .tab_ctn{
        display: flex;
        align-items: center;
        position: relative;
        z-index: 99999;
    }
    .tab_ctn li p{
        padding: 0 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .tab_ctn li{
        width: auto;
        height: 45px;
        line-height: 45px;
        text-align: center;
        color: #757575;
        font-weight: bold;
        padding: 5px 0;
        background: white;
        border: 1px solid black;
        cursor: pointer;
        border-right: none;
        border-left: none;
        background: #f8f9fd;
        border-top: 1px solid #e6e9f1 ;
        border-bottom: 1px solid #e6e9f1;
    }
    .tab_ctn li:last-child{
        /*border: 1px solid black;*/
    }
    .active .tab_ctn{
        position: absolute;
        top: 52px;
        left: 0;
    }

    .tabSelect{
        width: auto;
        position: absolute;
        top: 50px;
        box-shadow: 0 1px 6px rgb(0 0 0 / 20%);
        max-height: 350px;
        overflow: auto;
    }
    #tabSelect li{
        border-bottom: 1px solid #e6e9f1 !important;
    }

    .active ul li{
        border: none!important;
        background: #ffffff;
        border-top: 0!important;
        border-bottom: 1px solid #e6e9f1 !important;
    }
    .active ul .active{
        color: #3872ff !important;
        font-weight: bold !important;
        border-bottom: 2px solid #306eff !important;
    }

</style>

重点就是在 递归的组件中 添加 v-on="$listeners"

在这里插入图片描述
为方便大家不会在写递归组件时因为传值的问题，一直困扰，特留此文。。。。

愤怒的小郭
关注
  • 8
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
Vue中emit事件无法触发的问题
y_hh_的博客
08-16 3644
在父组件中定义事件监听，会出现无法触发对应的事件函数，在下面的代码中，我想通过v-on:event_1=“handle”, 想监听子组件中的event_1事件，但尽管事件发生了， 但还是触发不了，这个问题在于v-on:event_1="handle"的位置，需要放在 <my-template :users=“users” v-on:event_1=“handle” ></my-template> 中。 <body> <div id='app' v-on:ev
Vue 实现的递归组件如何向外传递事件和数据
SunShinessx的博客
09-15 5123
一.递归组件向外传递数据直接用$emit是无法实现的。因为是递归的原因。 2.解决方法： 1方法1：:用provide,inject方法实现。这种实现方法是实现爷爷组件和孙子组件通信的常用方法之一。但是逻辑上，爷爷组件和孙子组件之间是有耦合关系。如果组件封装需要尽量实现解耦，这种方式是有缺点的。 2.方法2：用eventBus实现：这种方法用在兄弟组件之间通信很常见。当然也可以用在爷爷...
this.$emit方法无效的原因
热门推荐
weixin_44294658的博客
08-04 2万+
this.$emit无效的问题 开发过程汇总突然遇到this.$emit无法将事件发布出去，原因查找发现是使用了驼峰命名法，导致方法不能被监听到。点击查看vue官方文档说明，最神奇的是并不是左右的emit都失效，只是有些emit的方法名在特定情况下失效。 解决方案 使用-连接，比如： this.$emit(‘my-method’); 使用this.$parent.方法名调用 ...
VUE实现父子组件传值以及递归组件的传值
最新发布
2401_84093899的博客
04-20 803
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里免费领取端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里免费领取**[外链图片转存中…(img-rfJxI5M6-1713574658505)][外链图片转存中…(img-bcGHRqWT-1713574658506)]
Vue子组件向父组件使用自定义事件$emit传递数据无效的坑
coderYYY的博客
04-01 6863
子级向父级传递—自定义事件 当子组件需要向父组件传递数据时，用到的是自定义事件 自定义事件的流程： 在子组件中，通过$emit()来触发事件。 在父组件中，通过v-on来监听子组件事件。 我们来看一个简单的例子： 我们之前做过一个两个按钮+1和-1，点击后修改counter。 我们整个操作的过程还是在子组件中完成，但是之后的展示交给父组件。 这样，我们就需要将子组件中的counter，传给父组件的某个属性，比如total。 <!--父组件模板--> <div i
Vue3父子组件emit参数传递（解决Vue2this.$emit无效问题）
韦_恩的博客
01-30 2万+
之前写了一篇Vue3路由跳转问题的博客，发现还是有很多同学对基本的使用改变还没有了解，于是我就顺道把常用的组件间传递的方式也写一下吧....... 注意的是： 1.Vue3中不在强调this的使用，可以说你在setup中完全不能用this，不像Vue2中把全部的内容都集成到this中。 2.Vue3现在由于compositionAPI的方式可以说是弱化了Vuex的存在（当然Vuex现在可以用没什么变化）。 3.如果您有Vue2的开发经历，用Vue3也不会特别陌生，会很快上手。 目录 1.解决.
解决$emit第一次触发事件失效问题
m0_58272336的博客
02-19 1556
直接懂了
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
10-18
今天小编就为大家分享一篇解决Vue.js父组件$on无法监听子组件$emit触发事件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vuejs使用$emit和$on进行组件之间的传值的示例
11-26
这两个方法主要用于子组件向父组件传递信息，因为 Vue 默认不支持子组件向父组件直接传递值，而 `$emit` 和 `$on` 的组合恰好解决了这个问题。 在 Vue 中，`$emit` 是子组件用于触发自定义事件的方法，通常伴随着...
Vue $emit()不能触发父组件方法的原因及解决
10-15
总结，解决Vue `$emit` 无法触发父组件方法的问题，主要关注以下几点： 1. 检查事件名称是否全为小写。 2. 确保父组件正确监听并定义了响应的方法。 3. 如果涉及数据传递，确认 `props` 是否正确设置。 4. 避免直接...
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
08-27
Vue 中的 $emit 与 $on 父子组件与兄弟组件之间的通信方式 在 Vue 中，$emit 与 $on 是两个非常重要的函数，它们用于实现组件之间的数据传输。下面，我们将详细介绍 Vue 中的 $emit 与 $on 父子组件与兄弟组件之间...
解决vue bus.$emit触发第一次$on监听不到问题
10-15
主要介绍了解决vue bus.$emit触发第一次$on监听不到问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 弹框使用this.$emit调用父组件方法及传参 无效 (已解决)
蓝胖子的博客
10-18 6132
子组件中调用父组件方法及传参 this.$emit无效的问题 最神奇的是并不是所有的emit都失效，只是有些emit的方法名在特定情况下失效。 在项目中刚开始用的是 this.$emit(“方法名”,‘参数’) this.$emit("fathermethod", this.labelTableData); this.$emit 无效. 解决方法: 使用this.$parent.方法名(“参数”)调用 // 关闭弹窗 close() { this.detailVisible
vue 双向绑定问题$emit无效
luoteen的博客
11-09 3529
父组件变量传给子组件，子组件$emit 触发父组件的方法修改父组件的变量，但是父组件的值变了，子组件的值没有改变 父组件： <div> // 子组件 <son :status.sync="status"/> </div> <script> export default { data(){ return{ status:false } } } </script> 子组件： <div @click="change"&gt
uniapp在不同页面间跳转时使用$emit和$on传值无效问题（记录坑）
a666666000的博客
09-08 8641
uniapp在不同页面间跳转时使用$emit和$on传值无效问题
Vue $emit()不触发方法的原因
weixin_44880056的博客
07-14 3952
Vue $emit()不触发方法的原因 1.事件名称不全是小写。事件名称要求全小写。 2.不是父子关系。这里的父子关系是严格的父子关系，祖孙关系也不行。只能一层一层触发，这在写树形组件时，很容易掉坑里。 3.父组件没有用 .sync修饰符 .sync是vue中用于实现简单的“双向绑定”的语法糖，在平时的开发中是非常使用的。 vue的prop是单向下行绑定：父级的prop的更新会向下流动到子组件中，但是反过来不行。可是有些情况，我们需要对prop进行“双向绑定”。这个时候，就可以用.sync来解决。 ...
vue emit失效原因
qq_25968127的博客
09-28 1003
vue emit失效原因记录: emit的事件名中有大写字母 组件的父子关系不对。可能父级是循环产生的，emit事件没发确定触发那个父级的事件。加ref解决
vue+el-menu递归导致$emit失效
real_xiaobai的博客
09-29 378
一、父组件 <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="
vue3$emit传值
09-04
在Vue 3中，可以通过使用`$emit`方法来实现组件之间的传值。与Vue 2相比，Vue 3中的`$emit`的用法是一样的。 在父组件中，可以通过在子组件上使用`@deleteArticle`来监听子组件触发的事件。例如，在父组件中的模板代码可以是这样的： ``` <sy-pagination @deleteArticle="deleteArticle"></sy-pagination> ``` 然后，在父组件中定义一个`deleteArticle`方法来处理子组件触发的事件。这个方法可以通过`$emit`来传递数据给父组件。例如： ``` const deleteArticle = (id) => { // 处理传递的数据 }; ``` 在子组件中，可以通过在`setup`函数中使用`emit`来触发事件并传递数据给父组件。例如： ``` import { reactive } from "vue"; export default { setup(props, { emit }) { let data = reactive({}); const deleteArticle = (id) => { emit("deleteArticle", id); // 使用emit触发事件，并传递id数据给父组件 }; return { data, deleteArticle }; }, }; ``` 这样，当子组件调用`deleteArticle`方法并传递一个id参数时，父组件的`deleteArticle`方法就会被触发，并且可以获取到传递的id值来进行相应的处理。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vuejs使用$emit和$on进行组件之间的传值的示例](https://download.csdn.net/download/weixin_38644688/13193971)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Vue3 $emit父子传值](https://blog.csdn.net/qq_52697994/article/details/119146513)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值