对于递归组件只调用一次的问题,解决方案示例:
父组件:parent.vue
<template>
<div id="app">
<Tree :data="data" @nodeClick="nClick"></Tree>
</div>
</template>
<script>
import Tree from './components/tree.vue'
export default {components: {Tree},
name: 'app',
data(){
return {
data: {
'title': '111',
'children': [
{'title': '111-1'},
{
'title': '111-2',
'children': [{'title': '111-2-1'}
]
}
]
}
}
},
methods: {nClick(title){console.log(title)
}
}
}
</script>
树状组件:components/tree.vue,在递归组件中再注册下自定义事件
<template>
<ul class="tree">
<li>
<span v-html="data.title" @click="handleClick(data.title)"></span>
<m-tree v-for="(item , idx) in data.children" :data="item" :key="idx" @nodeClick="outClick"></m-tree>
</li>
</ul>
</template>
<script>
export default {
name: 'mTree',
props: {
data: {
type: Object,
default (){return {}
}
}
},
methods: {handleClick(title){this.$emit('nodeClick',title);
},
outClick(title){this.$emit('nodeClick',title);
}
}
}
</script>
欢送关注:http://fenxianglu.cn/