다단계 목록을 달성하기위한 VUE 재귀 트리
재귀 란 무엇입니까?
간단히 말해서, 컴포넌트에서 컴포넌트 자체를 사용하는 것입니다.
재귀를 사용하는 이유는 무엇입니까?
드롭 다운 메뉴가 많고 동일한 수준, 계층 적 데이터 및 수준이 혼합 된 경우 v-for의 중첩 루프를 사용할 수 있으며 끝나지 않습니다. 네, 문제가 없으면 할 수 있지만 [많은] 수준의 분류로 데이터를 추가하면 v-for를 사용하여 얻을 수도 있지만 코드가 더 복잡하거나 혼란 스러울 수 있습니다! 또한 향후 유지 관리에도 적합하지 않습니다. 현재 우리는 재귀 구성 요소를 사용하여 우리가 말하는 [재귀 구성 요소]를 사용할 수 있습니다. 데이터가 아무리 증가하더라도 코드를 변경할 필요가 없습니다.
먼저 효과를 확인하십시오.
1.
부모 구성 요소 tree.vue, 자식 구성 요소 트리-세부
부모 구성 요소 코드의 두 파일을 만듭니다 .
<template>
<div id="tree">
<treedetail
:title="list.name" //把值传给子组件
:list="list.children" //把值传给子组件
:num='0'
>
</treedetail>
</div>
</template>
<script>
/**
* 模拟一个树形结构图
*/
const list = {
name: "电子产品",
children: [
{
name: "电视",
children: [
{
name: "philips",
children: [
{
name: "philips-A" },
{
name: "philips-B" },
{
name: "philips-C" }
]
},
{
name: "Tcl",
children: [
{
name: "Mac Air" },
{
name: "Mac Pro" },
{
name: "ThinlPad",
children: [
{
name: "ThinlPad-A",
children: [
{
name: "ThinlPad-A-a" },
{
name: "ThinlPad-A-b" },
{
name: "ThinlPad-A-c" }
]
},
{
name: "ThinlPad-B" },
{
name: "ThinlPad-C" },
{
name: "ThinlPad-D" }
]
}
]
},
{
name: "海兴" }
]
},
{
name: "电脑",
children: [{
name: "acer" }, {
name: "联想" }, {
name: "惠普" }]
},
{
name: "可穿戴的设备",
children: [
{
name: "手环",
children: [
{
name: "华为B5手环" },
{
name: "小米手环" },
{
name: "iphone手环" }
]
}
]
}
]
};
import treedetail from '../tree/treedetail'
export default{
name:'tree',
data(){
return{
list}
},
components:{
treedetail} //注册子组件
}
</script>
하위 구성 요소 코드 :
<template>
<div id="treedetail" >
<div class="treedetail" @click="btn()" :style="indent"> //btn是用来切换显示隐藏
<span>{
{
flag ? '-' :'+'}}</span>
<span>{
{
title}}</span> //接收到的标题
</div>
<div v-if="flag"> //这里加显示隐藏也是必要的
<treedetail //treedetail这里的命名要跟父组件注册子组件名称一样，不然无法显示。DIV就无法显示
v-for="(item,index) in list"
:key="index"
:title="item.name"
:list='item.children' //渲染列表下的列表数据
:num='num + 1' //这里的作用应该是分清层级。
></treedetail>
</div>
</div>
</template>
<script>
export default {
name:'treedetail',
props:{
title:{
type:String,
default:'名称'
},
list:{
type:Array},
num:{
type:Number,
default:0
}
},
data(){
return{
flag:false
}
},
methods:{
btn(){
this.flag=!this.flag
}
},
computed:{
indent(){
return `transform: translate(${
this.num*20}px)`;
}
}
}
</script>