Vue.js，父不响应子事件

Question

我遇到了一个问题，即父组件没有响应子事件。使用 Vue 开发者工具，我可以看到 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>

不在你的父组件的容器上。