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