Vue是一套用于構建用戶界面的漸進式框架,通過組合不同的模塊來實現可復用性和快速開發。Vue菜單表是該框架中的一個組件,用于創建具有嵌套層級的導航菜單。
使用Vue菜單表組件非常簡單,只需要在Vue實例中注冊該組件,并在template中聲明組件,然后傳入需要渲染的菜單項數據。例如:
Vue.component('menu-list', { props: { items: { type: Array, required: true } }, template: ` <ul> <li v-for="item in items" :key="item.id"> {{ item.title }} <menu-list v-if="item.children" :items="item.children" /> </li> </ul> ` })
在上述代碼中,我們定義了一個名為menu-list的組件,該組件接受一個名為items的prop,該prop會傳入組件渲染的菜單項數據。然后我們在template中使用v-for遍歷items數組,并渲染每個菜單項的標題,如果該菜單項有子菜單,則使用遞歸調用來渲染子菜單。
接下來,我們需要在Vue實例中聲明菜單項數據,并使用該數據渲染menu-list組件。例如:
new Vue({ el: '#app', data: { menuItems: [ { id: 1, title: '首頁' }, { id: 2, title: '產品', children: [ { id: 3, title: '產品1' }, { id: 4, title: '產品2' } ] } ] } })
在上述代碼中,我們定義了一個名為menuItems的數組,該數組包含了兩個菜單項對象,第一個菜單項只有標題,第二個菜單項包含了子菜單項。然后我們在Vue實例中將該數組傳入menu-list組件的items prop中,即可完成菜單的渲染。
總之,Vue菜單表是Vue框架中非常常用的組件之一,它能夠幫助我們快速創建具有嵌套層級的導航菜單,非常方便實用。