Vue.js2 - 상위 구성 요소에 의해 $emit 이벤트가 캡처되지 않음

Vue.js2 - 상위 구성 요소에 의해 $emit 이벤트가 캡처되지 않음

나는 부에즈에서 부트스트랩 탭 구성 요소를 만들려고 한다.탭 구성 요소는 두 부분으로 구성된다.첫째, 부모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방법은?어떤 도움이라도 크게 고마워할 것이다!

상위 구성 요소 템플릿에서 이벤트를 명시적으로 청취해야 함

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

낙타 케이싱된 사용자 지정 이벤트는 상위에서 트리거를 호출하지 않는다.변화하다this.$emit('tabItemClicked', [this.concept]);로this.$emit('tab_item_clicked', [this.concept]);https://github.com/vuejs/vue/issues/4044을 참조하십시오.

참조URL: https://stackoverflow.com/questions/44055530/vue-js2-emit-event-not-being-captured-by-the-parent-component