vue 递归组件多级_Vue递归组件实现树形结构菜单
Tree 組件是遞歸類組件的典型代表，它常用于文件夾、組織架構(gòu)、生物分類、國(guó)家地區(qū)等等，世間萬(wàn)物的大多數(shù)結(jié)構(gòu)都是樹形結(jié)構(gòu)。使用樹控件可以完整展現(xiàn)其中的層級(jí)關(guān)系，并具有展開收起選擇等交互功能。
如圖所示，我們要實(shí)現(xiàn)的就是這樣一個(gè)效果。之前我們寫樹狀結(jié)構(gòu)都是用jQuery來實(shí)現(xiàn)的，用Vue怎么實(shí)現(xiàn)呢？
一、數(shù)據(jù)部分模擬
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'}
]
復(fù)制代碼
二、組件各部分實(shí)現(xiàn)
Menu.vue
首先我們來寫個(gè)menu組件,這里放個(gè)ul列表，里面的內(nèi)容，用插槽來表示。
export default {
name: "Menu"
}
復(fù)制代碼
MenuItem.vue
如果沒有子節(jié)點(diǎn)，所要展示的標(biāo)題
export default {
name: "MenuItem"
}
復(fù)制代碼
SubMenu.vue
export default {
name: "SubMenu",
data(){
return {flag:false}
},
methods:{
change(){
this.flag=!this.flag
}
}
}
.sub{
padding-left:20px;
}
復(fù)制代碼
三、遞歸組件ReSubMenu.vue
這里到了我們實(shí)現(xiàn)樹形結(jié)構(gòu)思想的重點(diǎn)，即遞歸組件。當(dāng)我們重復(fù)判斷有沒有子節(jié)點(diǎn)，并做出相應(yīng)的展示的時(shí)候，這里就可以使用遞歸組件了。方便快捷，你值得擁有。
由于有子節(jié)點(diǎn)會(huì)循環(huán)SubMenu這部分操作，所以單獨(dú)提出來放到ReSubMenu組件中
{{data.title}}
{{child.title}}
import SubMenu from './SubMenu'
import MenuItem from './MenuItem'
export default {
name: "ReSubMenu",//可以使用遞歸組件
props:{
data:{
type:Object,//屬性校驗(yàn)，為對(duì)象數(shù)據(jù)類型，并且如果沒有賦值，默認(rèn)給一個(gè)空對(duì)象
default:()=>({})
}
},
components:{
SubMenu,
MenuItem
}
}
復(fù)制代碼
四、整合實(shí)現(xiàn)
{{menu.title}}
import Menu from './Menu'
import MenuItem from './MenuItem'
// import SubMenu from './SubMenu'
import ReSubMenu from './ReSubMenu'
export default {
data(){
return{
//這里的數(shù)據(jù)我就模擬一個(gè)了
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
}
}
復(fù)制代碼
注：本節(jié)部分語(yǔ)句參考 https://juejin.im/book/6844733759942557704/section/6844733760152272910。
總結(jié)
以上是生活随笔為你收集整理的vue 递归组件多级_Vue递归组件实现树形结构菜单的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 华为vrrp默认优先级_华为eNSP配置
- 下一篇： vue的Virtual Dom实现- s