vue遞歸組件實(shí)現(xiàn)樹形結(jié)構(gòu)

更新時間：2022年09月01日 10:50:37 作者：依古比古*

這篇文章主要為大家詳細(xì)介紹了vue遞歸組件實(shí)現(xiàn)樹形結(jié)構(gòu)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue遞歸組件實(shí)現(xiàn)樹形結(jié)構(gòu)，供大家參考，具體內(nèi)容如下

一、遞歸組件

什么是遞歸組件？簡單來說就是在組件中內(nèi)使用組件本身。函數(shù)自己調(diào)用自己。很多情況下我們呢刷數(shù)據(jù)的時候，不知道到底這個數(shù)據(jù)結(jié)構(gòu)是有多少層，那么這個時候我們就用到了遞歸來實(shí)現(xiàn)。

二、先用for來遍歷：

父組件中：

<template>
? <div class="home">
??
? ? <tree :title="list.name" :list="list.children"></tree>
? </div>
</template>

<script>
import tree from '../components/tree'
export default {
? name: "Home",
? components: {
? ? tree
? },
? data: function() {
? ? return {
? ? ? list: {
? ? ? ? name: "酒店",

? ? ? ? children: [
? ? ? ? ? {
? ? ? ? ? ? name: "經(jīng)濟(jì)",
? ? ? ? ? ? children: [
? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? name: "如家",
? ? ? ? ? ? ? ? children: [
? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "長江路-如家"
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "望江路-如家"
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? },
? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? name: "7天",
? ? ? ? ? ? ? ? children: [
? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "長江路-7天"
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "望江路-7天"
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? }
? ? ? ? ? ? ]
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "舒適",
? ? ? ? ? ? children: [
? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? name: "智選假日",
? ? ? ? ? ? ? ? children: [
? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "臥龍路-智選假日"
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "望江路-智選假日"
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? },
? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? name: "全季",
? ? ? ? ? ? ? ? children: [
? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "臥龍路-全季"
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "建設(shè)路-全季"
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? }
? ? ? ? ? ? ]
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "商務(wù)",
? ? ? ? ? ? children: [
? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? name: "中方商務(wù)",
? ? ? ? ? ? ? ? children: [
? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "臥龍路-中方商務(wù)"
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "望江路-中方商務(wù)"
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? },
? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? name: "錦江之星",
? ? ? ? ? ? ? ? children: [
? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "人民路-錦江之星"
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "新華路-錦江之星"
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? }
? ? ? ? ? ? ]
? ? ? ? ? }
? ? ? ? ]
? ? ? }
? ? };
? },
? methods: {}
};
</script>
<style scoped>
.ww {
? margin-left: 20px;
}
.hh {
? font-size: 10px;
}
</style>

子組件中：

<!-- ?-->
<template>
? <div>

? <!-- 第一層循環(huán) 循環(huán)酒店-->
? ? ?<div v-for="(item,index) in list " :key="index">
? ? ? <h3>{{item.name}}</h3>
? ? <!-- <! 第二層循環(huán)酒店的類型-->?
?
? ? <div v-for="(item,index) in item.children" :key="index">
? ? ? <h5>{{item.name}}</h5>
? ? ? <!-- 第三層循環(huán)酒店的名稱 -->
? ? ? <div v-for="(item,index) in item.children" :key="index" class="ww">
? ? ? ? <h6>{{item.name}}</h6>
? ? ? ? <!-- 第四層循環(huán)酒店的具體介紹 ?-->
? ? ? ? <div v-for="(item,index) in item.children" :key="index" class="hh">{{item.name}}</div>
? ? ? </div>
? ? </div>
? ?</div>?


? </div>
</template>

<script>
export default {
? name: "tree",
? components: {},
? data: function() {
? ? return {
? ? ??
? ? };
? },
? props:{
? ? title:
? ? {
? ? ? type: String,
? ? ? default:"標(biāo)題"

? ? },
? ? list:{
? ? ? type:Array,

? ? }
? }
??
};
</script>
<style scoped>
/* @import url(); 引入css類 */
</style>

效果圖如下：　　

三、遞歸來實(shí)現(xiàn)？

通過組件自身的 name名字來實(shí)現(xiàn)組件自身的遞歸調(diào)用 .

父組件中：

<template>
? <div class="home">
??
? ?<tree :title="list.name" :list="list.children" :detph="0"></tree>
? </div>
</template>

<script>
import tree from '../components/tree'
export default {
? name: "Home",
? components: {
? ? tree
? },
? data: function() {
? ? return {
? ? ? list: {
? ? ? ? name: "酒店",

? ? ? ? children: [
? ? ? ? ? {
? ? ? ? ? ? name: "經(jīng)濟(jì)",
? ? ? ? ? ? children: [
? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? name: "如家",
? ? ? ? ? ? ? ? children: [
? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "長江路-如家"
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "望江路-如家"
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? },
? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? name: "7天",
? ? ? ? ? ? ? ? children: [
? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "長江路-7天"
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "望江路-7天"
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? }
? ? ? ? ? ? ]
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "舒適",
? ? ? ? ? ? children: [
? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? name: "智選假日",
? ? ? ? ? ? ? ? children: [
? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "臥龍路-智選假日"
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "望江路-智選假日"
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? },
? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? name: "全季",
? ? ? ? ? ? ? ? children: [
? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "臥龍路-全季"
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "建設(shè)路-全季"
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? }
? ? ? ? ? ? ]
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "商務(wù)",
? ? ? ? ? ? children: [
? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? name: "中方商務(wù)",
? ? ? ? ? ? ? ? children: [
? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "臥龍路-中方商務(wù)"
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "望江路-中方商務(wù)"
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? },
? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? name: "錦江之星",
? ? ? ? ? ? ? ? children: [
? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "人民路-錦江之星"
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "新華路-錦江之星"
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? }
? ? ? ? ? ? ]
? ? ? ? ? }
? ? ? ? ]
? ? ? }
? ? };
? },
? methods: {}
};
</script>
<style scoped>
.ww {
? margin-left: 20px;
}
.hh {
? font-size: 10px;
}
</style>

子組件：

<!-- ?-->
<template>
? <div>
? ? <div :style="getDetph">
? ? ? <!-- 顯示隱藏 -->
? ? ? <div @click="getData ">
? ? ? ? <!-- 這里呢如果為真的話就顯示那么就是減號否則的話就是加號 -->
? ? ? ? <span >{{isShow?'-':'+'}}</span>{{title}}</div>
? ? ? <!-- 那么在這里我們就需要改成 item.name和item.children -->
? ? ? <div v-if="isShow">
? ? ? ? <tree
? ? ? ? ? :title="item.name"
? ? ? ? ? :list="item.children"
? ? ? ? ? v-for="(item,index) in list"
? ? ? ? ? :key="index"
? ? ? ? ? :detph="detph+1"
? ? ? ? >
? ? ? ? ? <!-- 每次遞增1 -->
? ? ? ? </tree>
? ? ? </div>
? ? </div>
? </div>
</template>

<script>
export default {
? name: "tree",
? components: {},
? data: function() {
? ? return {
? ? ? isShow: false
? ? };
? },
? props: {
? ? // 接收標(biāo)題
? ? title: {
? ? ? type: String
? ? ? // default: "標(biāo)題"
? ? },
? ? // 接收一整個數(shù)組
? ? list: {
? ? ? type: Array
? ? },
? ? // 用來接收層數(shù)
? ? detph: {
? ? ? type: Number
? ? }
? },
? // 計算屬性用來接收我們的層數(shù)
? computed: {
? ? getDetph() {
? ? ? return `transform:translate(${this.detph * 20}px)`;
? ? }
? },
? methods: {
? ? getData: function() {
? ? ? this.isShow = !this.isShow;
? ? }
? }
};
</script>
<style scoped>
/* @import url(); 引入css類 */
</style>

效果圖：