Tree 組件是遞歸類組件的典型代表，它常用于文件夾、組織架構、生物分類、國家地區等等，世間萬物的大多數結構都是樹形結構。使用樹控件可以完整展現其中的層級關系，并具有展開收起選擇等交互功能。

如圖所示，我們要實現的就是這樣一個效果。之前我們寫樹狀結構都是用jQuery來實現的，用Vue怎么實現呢？

一、數據部分模擬

menuList:[

{

title:'菜單1',

children:[

{

title:'菜單1-1',

children:[

{title:'菜單1-1-1'},

{title:'菜單1-1-2'},

{title:'菜單1-1-3'}

]

},

{title:'菜單1-2'},

{title:'菜單1-3'}

]

},

{title:'菜單2'},

{title:'菜單3'}

]

復制代碼

二、組件各部分實現

Menu.vue

首先我們來寫個menu組件,這里放個ul列表，里面的內容，用插槽來表示。

export default {

name: "Menu"

}

復制代碼

MenuItem.vue

如果沒有子節點，所要展示的標題

export default {

name: "MenuItem"

}

復制代碼

SubMenu.vue

export default {

name: "SubMenu",

data(){

return {flag:false}

},

methods:{

change(){

this.flag=!this.flag

}

}

}

.sub{

padding-left:20px;

}

復制代碼

三、遞歸組件ReSubMenu.vue

這里到了我們實現樹形結構思想的重點，即遞歸組件。當我們重復判斷有沒有子節點，并做出相應的展示的時候，這里就可以使用遞歸組件了。方便快捷，你值得擁有。

由于有子節點會循環SubMenu這部分操作，所以單獨提出來放到ReSubMenu組件中

{{data.title}}

{{child.title}}

import SubMenu from './SubMenu'

import MenuItem from './MenuItem'

export default {

name: "ReSubMenu",//可以使用遞歸組件

props:{

data:{

type:Object,//屬性校驗，為對象數據類型，并且如果沒有賦值，默認給一個空對象

default:()=>({})

}

},

components:{

SubMenu,

MenuItem

}

}

復制代碼

四、整合實現

{{menu.title}}

import Menu from './Menu'

import MenuItem from './MenuItem'

// import SubMenu from './SubMenu'

import ReSubMenu from './ReSubMenu'

export default {

data(){

return{

//這里的數據我就模擬一個了

menuList:[

{

title:'菜單1',

children:[

{

title:'菜單1-1',

children:[

{title:'菜單1-1-1'},

{title:'菜單1-1-2'},

{title:'菜單1-1-3'}

]

},

{title:'菜單1-2'},

{title:'菜單1-3'}

]

},

{title:'菜單2'},

{title:'菜單3'}

]

}

},

components:{

Menu,MenuItem,ReSubMenu

}

}

復制代碼

注：本節部分語句參考 https://juejin.im/book/6844733759942557704/section/6844733760152272910。

總結

以上是生活随笔為你收集整理的vue 递归组件多级_Vue递归组件实现树形结构菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。