在一个组件模板中调用这个组件本身

right.pngdata.json

  1.  <style>
  2.         img{
  3.             width: 12px;
  4.             opacity: 0.5;
  5.         }
  6.         img.active{
  7.             transform: rotate(90deg);
  8.             opacity: 1;
  9.         }
  10.         ul{
  11.             overflow: hidden;
  12.             margin: 0;
  13.         }
  14.         /* 子列表展开闭合动画 */
  15.         .v-enter, .v-leave-to{
  16.             max-height: 0;
  17.         }
  18.         .v-enter-active, .v-leave-active{
  19.             transition: 1s;
  20.         }
  21.         .v-enter-to, .v-leave{
  22.             max-height: 200px;
  23.         }
  25.     </style>
  26. <body>
  27.     <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
  28.     <div id='myApp'>
  29.         <h1>递归组件</h1>
  30.         <my-com v-for="item in list" :data="item" :key="item.title"></my-com>
  31.     </div>
  32.     <!-- 组件模板 -->
  33.     <template id='myTem'>
  34.         <div>
  35.             <img 
  36.                 @click="open=!open" 
  37.                 :class="open? 'active': ''" 
  38.                 src="./right.png" 
  39.                 v-if="data.list.length"
  40.             >
  41.             <b @click="open=!open">
  42.                 {{data.title}}
  43.                 <span v-if="data.list.length">({{data.list.length}})</span> 
  44.             </b>
  45.             <transition>
  46.                 <ul v-if='open'>
  47.                     <!-- 递归组件: 在一个组件模板中调用这个组件本身 -->
  48.                     <li v-for="item in data.list" is="my-com" :data="item" :key="item.title"></li>
  49.                 </ul>
  50.             </transition>
  52.         </div>
  53.     </template>
  54.     <script>
  55.         Vue.component('myCom', {
  56.             template: '#myTem',
  57.             props: ["data"],
  58.             data(){return { open: false }}
  59.         })
  60.         new Vue({
  61.             el: '#myApp',
  62.             data: {
  63.                 list: []
  64.             },
  65.             created() {
  66.                 fetch("./data.json").then(res=>{
  67.                     return res.json()
  68.                 }).then(res=>{
  69.                     this.list = res
  70.                 })
  71.             },
  72.         })
  73.     </script>
  74. </body>