2***@qq.com
2***@qq.com
  • 发布:2023-10-14 14:17
  • 更新:2023-10-14 14:17
  • 阅读:197

uni-app小程序端使用递归组件第二次使用$Emit事件失效

分类:uni-app

uni-app小程序端使用递归组件时候,第二次调用$emit事件失效,控制台输出已经赋值了,但是不去触发$emit方法把值传递给父组件
代码:
1子组件页面 TreeChildren
vue
<template>
<view>
<text>递归组件</text>

    <view style=" margin-left: 20rpx; ">  
        <text @click="addChild">{{ node.name }} </text>  
        <view v-if="node.children.length > 0">  
            <!-- <text>树形结构子级{{JSON.stringify(node)}}</text> -->  
            <TreeChildren v-for="child in node.children" :node="child" :key="child.id"></TreeChildren>  
        </view>  
    </view>  
</view>  

</template>

<script>
import TreeChildren from './index.vue'; //调用自己

export default {  
    name: "TreeChildren",  
    props: {  
        node: {  
            type: Object,  
        },  
        index:{  
            type:Number  
        }  
    },  
    components: {  
        TreeChildren  
    },  
    data() {  
        return {  
            treeData: {  
                id: 1,  
                name: 'Node 1',  
                children: []  
            }  
        };  
    },  
    computed: {  
        updatedNode: {  
            get() {  
                return this.treeData;  
            },  
            set(newValue) {  
                this.treeData = newValue;  
            }  
        }  
    },  
    methods: {  
        //   handleNodeUpdated(updatedNode) {  
        //     // Handle the updated node here  
        // this.$nextTick(function(){  
        //            this.treeData=updatedNode      
        //    })    
        //     console.log('Updated Node:', updatedNode);  

        //   },  
        addChild() {  
            const newId = Math.random(); // 生成一个随机的id  
            const newNode = {  
                id: newId,  
                name: `Node ${newId}`,  
                children: []  
            };  

            this.node.children.push(newNode);  
            console.log('Updated Node:', this.node);  
            this.$emit('node-updated',this.index, this.node);  
            // this.$forceUpdate(); // 强制更新子组件  
            // this.$emit('update:index', this.node); // 发出一个事件通知父组件  
        }  
    }  
};  

</script>

2父组件页面
<template>
<view class="agency" @click="agencyIndex=2">
服务网点
<view class="" v-if="agencyIndex==2">
<view class=' agency'>一星网点下级:3

                        <view class="" v-for="(item,index) in treeData" :key="item.id">  
                            <!-- #ifdef MP -->  
                            <treeChildren :node.sync="item"  :index="index" @node-updated="handleNodeUpdated"></treeChildren>  
                            <!-- #endif -->  
                            <!-- #ifndef MP -->  
                            <treeN
2023-10-14 14:17 负责人:无 分享
已邀请:

要回复问题请先登录注册