树状项目分类是Web应用中心常见的信息展示方式，本案例使用组件创建树状项目分类。其主要代码如下：

【例6.18】 使用组件创建树状项目分类（源代码\ch06\6.18.html）。

<div id="app">
    <category-component :list="categories"></category-component>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const CategoryComponent = {
          name: 'catComp',
          props: {
              list: {
                  type: Array
              }
          },
          template: `
              <ul>
                  <!-- 如果list为空，表示没有子分类了，结束递归 -->
                  <template v-if="list">
                     <li v-for="cat in list">
                        {{cat.name}}
                        <catComp :list="cat.children"/>
                     </li>
                  </template>
              </ul>
           `
    }
    const app = Vue.createApp({
            data(){
                return {
                    categories: [
                              {
                                name: '网站开发技术', 
                                children: [
                                     {
                                        name: '前端开发技术', 
                                        children: [
                                             {name: 'HTML5开发技术'}, 
                                             {name: 'Javascript开发技术'},
                                             {name: 'Vue.js开发技术'}
                                         ]
                                     }, 
                                    {
                                         name: 'PHP后端开发技术'
                                     }
                                 ]
                           },
                           {
                                name: '网络安全技术', 
                                children: [
                                     {name: 'Linux系统安全'}, 
                                     {name: '代码审计安全'},
                                     {name: '渗透测试安全'}
                                 ]
                           }]
                    }
                },
    components: {
        CategoryComponent
    }
    }).mount('#app');
</script>

运行上述程序，结果如图6-23所示。

本文节选自《Vue.js 3.x+Element Plus从入门到精通（视频教学版）》，获出版社和作者授权发布。