剛才寫了篇《element多層導航選單》文章，順便也寫寫其中核心原理
其實沒啥好說就是組件遞回，這里呢簡單寫個例子，
面試被問到的時候直接拿來手寫代碼也行，
有看到本文章的同學可以復制代碼去試試
沒多少代碼量，主要是讓還沒懂組件遞回的同學好理解
核心就這個，組件自己呼叫自己：
// ====== 組件： ==================
<template>
<ul>
<li v-for="(item,index) in list " :key="index">
<p>{{item.name}}</p>
<treeMenus :list="item.children"></treeMenus>
</li>
</ul>
</template>
<script>
export default {
name: "treeMenus",
props: {
list: Array
}
};
</script>
<style>
ul {
padding-left: 20px !important;
}
</style>
// ====== 呼叫： ==================
<!-- html呼叫 -->
<treeMenus :list="treeMenusData"></treeMenus>
treeMenusData: [ // 資料格式
{
name: "選單1",
children: [
{
name: "選單1-1",
children: []
}
]
}
]
效果圖：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/142399.html
標籤：JavaScript
上一篇：element多層導航選單