vue 递归组件多级_Vue递归组件实现树形结构菜单
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递归组件实现树形结构菜单的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 华为vrrp默认优先级_华为eNSP配置
- 下一篇： vue的Virtual Dom实现- s