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

Answer 2

camelCased自定义事件不会在父级中调用触发器。将this.$emit('tabItemClicked', [this.concept]);更改为this.$emit('tab_item_clicked', [this.concept]);请参阅https://github.com/vuejs/vue/issues/4044

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

2 个答案: