<script>
    export default{
        name:"ComNameHello"
    }
</script>

// 1.創(chuàng)建組件
<template>
   <div>
      <ComNameHello></ComNameHello>  //4.使用組件  可使用組件file1.vue
   </div>
</template>
<script>
   import ComName from "./file1.vue"  //2.引用組件  ComName為file1.vue的組件對象
   export default{
        componemts:{  // 3.注冊組件
            [ComName.name]: ComName  
            // ComName.name用來獲取：file1.vue的組件對象的name屬性值，
            //                      -->是一個字符串"ComNameHello"，
            //                      -->被用做：組件名
            // key是變量，必須用“[]”包起來
            // ComName 是組件對象
            // 即：components:{"組件名":組件對象}
        }
    }
</script>

<template>
    <div >
        <h1>組件遞歸</h1>
        // 使用子組件ComChild
        <com-child :list="list"></com-child> // 向子組件傳遞數(shù)據(jù)
    </div>
</template>
<script>
export default {
    name: 'ComList',
    data() { 
        return { 
            list: [{
                title: 'A',
                children: [{
                    title: 'A_A1', 
                },{
                    title: 'A_A2',
                    children: [{
                        title: 'A_A2_A1',
                    },{
                        title: 'A_A2_A2',
                   }]
                }]
            },{
                "title": "B"
            },{
                "title": "C"
            }]
        }
    },
    components: {
      ComChild: {   // 自定義子組件
        name: 'ComChild', 
        // 模板
        // 在組件內(nèi)部調(diào)用自己 
        //          （1）:list="list" --> 即：變量list="來自父組件的值"
        //          （2）使用v-for遞歸組件時-->需在當(dāng)前組件（組件名'ComList'）中，
        //                                 -->調(diào)用自身組件<com-child>
        template:  `  
            <ul>
               <li v-for="(item,index) in list" :key="index"> 
                 <span>{{item.title}}</span>
                 <com-child v-if="item.children" :list="item.children"></com-child>
               </li>
            </ul>`,
        props: ['list'] // 父組件傳遞來的數(shù)據(jù)
      }
    }
  }
</script>

import header from '@/components/header/header';
export default{
  components: {
    'header': header
  }
};