Question

我对Vue.js不感兴趣。我认为事件是有道理的：我以为事件在DOM树中冒泡直到被父母抓住。但是我一定想念一些东西。以下代码不起作用，不生成任何错误或警告，并且在Vue开发人员工具中，我看到了事件的发出。我想念什么？

index.html：

<!doctype html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vuex@3.1.2/dist/vuex.js"></script>

</head>
<body>

    <div id="app" @button-clicky="gotevent">
        <div @button-clicky="gotevent">
            <h1>{{ info }} {{ counter }}</h1>
            <button-component />
        </div>
    </div>

    <script src="./main.js"></script>
</body>
</html>

main.js：

Vue.component('button-component', {
    data: function() {
        return {
            count: 1
        }
    },

    methods:
    {
        clicky() {
            this.$data.count++;
            this.$emit('button-clicky');
        }
    },

    template: `<button @click="clicky">Go {{ count }}</button>`
});

const vue = new Vue({
    el: '#app',
    data: {
        info: "this is title.",
        counter: 0
    },

    methods: {
        gotevent() { 
            this.$data.counter++;
            alert('The event was heard!'); }
    }
});

我不能在发出该事件的组件上方的任何父级上监听事件吗？

我在直接父级<div>和'app'容器上都添加了侦听器，但没有任何反应，也没有抛出任何错误或警告。

Answer 1

我不认为Vue事件像DOM事件一样冒泡，您需要将它们捕获在发光组件上，因此<button-component @button-clicky="gotevent" />

Vue.JS：为什么父元素不会接收事件？父级必须是自定义组件吗？

1 个答案: