爷孙通信 及 组件自调用

1. 组件自己调用自己
   父组件

   <template>
     <div>
       <detail-list :list="categoryList"></detail-list>
     </div>
   </template>
   <script>
   import DetailList from './detailList.vue'
   
   export default {
     components: { DetailList },
     data () {
       return {
         categoryList: [
           {
             title: '1',
             children: [
               {
                 title: '1-1'
               },
               {
                 title: '1-2'
               },
             ]
           },
           {
             title: '2',
             children: [
               {
                 title: '2-1'
               },
               {
                 title: '2-2'
               },
             ]
           }
         ]
       }
     }
   }
   </script>
   

   子组件

   <template>
   <template>
     <div>
       <!--递归组件的应用===》可以通过组件命名来自己使用自己的组件-->
       <div class="item" v-for="(item, index) in list" :key="index">
         <div class="item-title border-bottom">
           <span class="item-title-icon"></span>
           {{ item.title }}
         </div>
         <div v-if="item.children" class="item-children">
           <detail-list :list="item.children"></detail-list>
           <!-- //自己使用自己的组件detailList -->
         </div>
       </div>
     </div>
   </template>
   
   <script>
   export default {
     name: 'DetailList', //组件命名
     props: {
       list: Array,
     },
     data() {
       return {}
     },
   }
   </script>
   

2. 爷孙通信
   
   grand.vue

   <template>
     <div>
       🎈爷爷
       <br>
       <div>GrandSon的回复：{{reply}}</div>
       <father :msg1="msg1" :msg2="msg2" @getReply="getReply"></father>
     </div>
   </template>
   <script>
   import Father from './father.vue'
   
   export default {
     components: { Father },
     data () {
       return {
         msg1: '1️⃣我是GrandFather，把第二条传给GrandSon',
         msg2: '2️⃣GrandSon你好，我是GrandFather',
         reply: '' // 接收来自GrandSon的消息
       }
     },
     methods: {
       /* 将获得的数据绑定到data中，便于视图层渲染 */
       getReply (param) {
         this.reply = param
       }
     }
   }
   </script>
   
   

   father.vue

   <template>
     <div>
        🎈父亲
       <p>$attrs：{{$attrs}}</p>
       <children v-bind="$attrs" v-on="$listeners"></children>
     </div>
   </template>
   <script>
   import Children from './children.vue'
   export default {
     props: ['msg1'],
     components: {Children},
   }
   </script>
   

   chidren.vue

   <template>
     <div class="child">
       🎈孙子
       <p>GrandFather说：{{ msg2 }}</p>
       <button @click="reply">回复GrandFather</button>
     </div>
   </template>
   
   <script>
   export default {
     props: ['msg2'],
     data() {
       return {
         replyWord: 'GrandFather你好，我是GrandSon，收到消息了',
       }
     },
     methods: {
       reply() {
         this.$emit('getReply', this.replyWord)
         // this.$listeners.getReply(this.replyWord)
       },
     },
   }
   </script>