Vue.js2 - $emit 事件未被父组件捕获

Question

我正在尝试在 Vuejs 中创建一个 Bootstrap 选项卡组件。选项卡组件由两部分组成。首先，tabs-list包含多个tab-list-item组件的父组件。这是这两个的代码-

//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]);
        }
    }
});

所以，在这里我tab-list-item应该tabItemClicked在单击任何选项卡时发出一个事件。但是，我没有在控制台中记录任何内容。当我查看 Vue 开发人员控制台时，我确实看到事件被发出。但是为什么它没有被父tabs-list方法捕获？任何帮助将不胜感激！

Answer 1

你必须显式监听父组件模板中的事件

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);
            });
        }
    }
}