Vue.js2 - $ emitter-Ereignis wird nicht von der übergeordneten Komponente erfasst

Question

Ich versuche, eine Bootstrap-Registerkarte-Komponente in Vuejs zu erstellen. Die Tabs-Komponente besteht aus zwei Teilen. Erstens, die Elternkomponente tabs-list Komponente, die mehrere tab-list-item Komponente enthält. Hier ist der Code für beide these-

//Vue component template for tabs list. 
Vue.component('tabs-list', { 
    template: `<ul class="nav nav-tabs nav-justified" role="tablist"> 
       <tab-list-item v-for="concept in concepts" :key="concept.id" :concept="concept" :selected="concept.active">{{ concept.title }}</tab-list-item> 
      </ul>`, 
    data() { 
     return { 
      activeTab: 1, 
      concepts: [ { title: 'Tab A', id:1, active: true}, 
         { title: 'Tab B', id:2, active: false}, 
         { title: 'Tab C', id:3, active: false}, 
         { title: 'Tab D', id:4, active: false}, 
         { title: 'Tab E', id:5, active: false}, 
         { title: 'Tab F', id:6, active: false}, 
         { title: 'Tab G', id:7, active: false}, 
         { title: 'Tab H', id:8, active: false}] 
     } 
    }, 
    methods: { 
     tabItemClicked(concept) { 
      console.log(concept); 
      this.activeTab = concept.id; 
      this.concepts.forEach(tab=> { 
       tab.active = (tab.id === concept.id); 
      }); 
     } 
    } 

}); 

//Vue component template for tab list item. 
Vue.component('tab-list-item', { 
    props: ['concept', 'selected'], 
    template: `<li role="presentation" :class="{active:concept.active}"> 
       <a :href='computedHref' :aria-controls="ariaControls" role="tab" data-toggle="tab" @click="tabClicked"> 
        <img :src="aquaImage" class="image-responsive concept-image img-active"> 
        <slot></slot> 
       </a> 
      </li>`, 
    computed: { 
     computedHref: function() { 
      return "#concept"+this.concept.title 
     }, 
     ariaControls: function() { 
      return "concept"+this.concept.title 
     }, 
     aquaImage: function() { 
      return "/images/"+this.concept.title+"-aqua.png" 
     } 
    }, 
    data() { 
     return { 
      isActive: false 
     } 
    }, 
    mounted() { 
     this.isActive = this.selected; 
    }, 
    methods: { 
     tabClicked: function() { 
      this.$emit('tabItemClicked', [this.concept]); 
     } 
    } 
}); 

So, hier mein tab-list-item sollte ein Ereignis tabItemClicked emittieren, wenn eine der Registerkarten geklickt wird. Ich bekomme jedoch nichts in der Konsole eingeloggt. Wenn ich mir die Vue-Entwicklerkonsole anschaue, sehe ich, wie das Ereignis ausgelöst wird. Aber warum wird es nicht von der übergeordneten Methode tabs-list erfasst? Jede Hilfe wird sehr geschätzt!

Answer 1

Sie haben ausdrücklich auf die Veranstaltung

Vue.component('tabs-list', { 
    template: `<ul class="nav nav-tabs nav-justified" role="tablist"> 
       <tab-list-item v-on:tabItemClicked="tabItemClicked" v-for="concept in concepts" :key="concept.id" :concept="concept" :selected="concept.active">{{ concept.title }}</tab-list-item> 
      </ul>`, 
    //...., 
    methods: { 
     tabItemClicked(concept) { 
      console.log(concept); 
      this.activeTab = concept.id; 
      this.concepts.forEach(tab=> { 
       tab.active = (tab.id === concept.id); 
      }); 
     } 
    } 
}