1. 主要代码
使用单文件组件的方式, 需要一个父组件treeMenu, 和子组件treeItem
1.1 父组件treeMenu.vue
:nodes="treeData">
export default {
name: 'treeMenu',
data: () => {
return {
treeData: {
label: 'china',
nodes: [{
label: 'hubei',
nodes: [{
label: 'wuhan'
},
{
label: 'yichang'
},
{
label: 'jinzhou'
}]
}]
}
}
}
}
1.2 子组件treeItem.vue
class="tree-item-label"
:class="{active: isActive}"
@click="activeItem"
>{{nodes.label}}
v-for="(item, index) in nodes.nodes"
:key="index"
:nodes="item">
export default {
name: 'treeItem',
props: ['nodes'],
data () {
return {
}
},
computed: {
isEnd () {
console.log(this.nodes.nodes)
return this.nodes.nodes && this.nodes.nodes.length
}
},
methods: {
activeItem: () => {
}
}
}
2. 坑点
使用递归组件时, 子组件必须在全局注册, 否则在调用时会提示引用错误
必须设置递归终止条件, 否则会导致内存溢出报错
3. TODO
本篇主要实现了从数据到视图的数据展示的实现, 下一篇将实现从视图到数据的操作数据的实现
)