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>

不在父组件的容器上。

Vue.js，父级未响应子级事件

Vue.js, parent not responding to child event

javascript

events

vue.js

vue-component