Vue.js，父母没有回应儿童事件

Question

我遇到一个问题，即父组件没有响应孩子的事件。使用Vue Developer Tools，我可以看到events_loading组件正在发出<Calendar>事件，但是父组件没有响应。

父HTML是......

<div class="appContainer" v-on:events_loaded="test" v-bind:class="{ 'appContainer--isLoading':is_loading }">
    <app-header></app-header>
    <div class="appView" id="js-appView">
        <aside class="appAside">
            <date-picker></date-picker>
        </aside>
        <main class="appMain">
            <calendar></calendar>
        </main>
    </div>
</div>

JS就是......

export default {
    name: 'app',
    methods: {
        test: function() {
            alert('sdfds');
        }
    },
    data: function() {
        return {
            is_loading: false
        }
    },
    components: {
        'app-header': AppHeader,
        'date-picker': DatePicker,
        'calendar': Calendar
    }
}

Answer 1

您想要从calendar收听活动，因此您应该在日历组件上写下v-on：

<calendar v-on:events_loaded="test"></calendar>

不在您父母组件的容器上。