vue項目中，樹形遞歸組件回調父組件結果

以emoji-comments，一個樹形遞歸的點贊修改點贊數爲例，因爲修改多維數組需要用到this.$set,而在遞歸結構中，遞歸的組件相當於孫組件，所以需要將點擊函數以及emit函數分開寫

<template>
    <div class="comments-list">
        <a-row class="comments-list-item" v-for="(item,index) in comments" v-bind:key="index" :id="'floor_' + item.data.id">
            <a :href="'#replay_'+item.data.id"></a>
            <div class="comments-list-item-heading">
                <a-row>
                    <a-col :span="2">
                        <img src="../assets/img/heading.jpg" style="" />
                    </a-col>
                    <a-col :span="22">
                        <a-row>
                            <a-col :span="20">
                                <span class="comments-list-item-username">{{item.data.name || AnonymousText}}</span>
                            </a-col>
                            <a-col :span="4">
                                <span class="time">{{ item.data.created_at }}</span>
                            </a-col>
                       </a-row>
                       <a-row>
                           <div class="comments-list-item-content" v-html="item.data.content"></div>
                      </a-row>
                      <a-row class="comment-under">
                          <span  class="replay_pc" @click="clickReplay(item.data.id)" v-if="showReplay && item.data.id">
                              <span>
                                  {{replayText}}
                              </span>
                          </span>
                          <span class="replay_pc" :data="item.data.id"  v-if="showUnlike && item.data.id">
                                                    <!--  點擊事件用Unlike，emit用另外的函數emit回調  -->
                             <span @click="UnLike({item:item,index:index})"><a-icon :theme="item.data.unlike?'filled':'outlined'" :style="{color:unlikeColor}" type="dislike" /></span>
                                 {{getItemUnlikeNumber(item)}}
                            </span>
                            <span class="replay_pc" :data="item.data.id"  v-if="showLike && item.data.id">
                                <span @click="clickLike(item.data.id)"><a-icon :theme="item.data.like?'filled':'outlined'" :style="{color:likeColor}" type="like" /> </span>
                                   {{getItemLikeNumber(item)}}
                                </span>
                            <span class="replay_pc" :data="item.data.id"  v-if="showReport && item.data.id">
                                <span @click="clickReport(item.data.id)">
                                    {{reportText}}
                                </span>
                           </span>
                       </a-row>
                   </a-col>
               </a-row>
           </div>
           <a :id="'replay_'+item.data.id"></a>
          <div class="item-child" v-if="item.children.length > 0">
              <list 
                  @clickReplay="clickReplay"
                  @clickReport="clickReport" 
                  @clickUnlike="clickUnlike"       <!--  此處 -->
                  @clickLike="clickLike" 
                  :AnonymousText="AnonymousText"
                  :replayText="replayText" 
                  :reportText="reportText" 
                  :showLike="showLike"
                  :showUnlike="showUnlike"
                  :showReplay="showReplay"
                  :showReport="showReport"
                  :likeColor="likeColor"
                  :unlikeColor="unlikeColor"
                  :comments="item.children" />
              </div>
          </a-row>
      </div>
</template>

<script>
    export default {
        name: 'List',
            props: {...},
        data() {....},
        methods: {
           ...
            UnLike(row) {
                this.$emit('clickUnlike',row.item, r=> {
                    if(r) {
                        row.item.data.unlike_number++
                        this.$set(this.comments,row.index,row.item)
                    } else {
                        alert('操作b')
                    }
                })
             },
             ...
            clickUnlike(row,cab) {
                this.$emit('clickUnlike',row.item, r => {
                    cab(r)
                })
            },
            ...
        },
        computed:{
            getItemLikeNumber() {
                return function(item) {...},
            getItemUnlikeNumber() {
                return function(item) {...}
            },
        },
        updated() {...},
        mounted() {...}
    };
</script>

主要是點擊事件與emit事件分開，emit需要將上級組件結果回調