点击事件监听器不适用于VueJS中的组件

Question

HTML：

<ul>
    <item
      v-on:click="boom"
      v-bind:product="item"
      v-bind:key="item.id"
      v-for="item in items"
     ></item>
</ul>

Javascript：

Vue.component('item', {
    props: ['product'],
    template: '<li><a href="#">{{ product.name }}</a></li>',
});

let app = new Vue({
    el: 'ul',
    data: {
        items: [
            { id: 0, name: 'penda' },
            { id: 1, name: 'harla' },
            { id: 2, name: 'calar' },
        ],
    },
    methods: {
        boom: function (e) {
            alert('Aha!');
        }
    }
});

一切正常，但是boom事件侦听器从未触发。你知道原因吗？

Answer 1

使用@click.native="boom"作为@Pvl回答。或从父组件绑定自定义，并从子组件中发出。请运行并检查以下代码。

Vue.component('item', {
    props: ['product'],
    template: '<li @click="clickevent($event)"><a href="#">{{ product.name }}</a></li>',
    methods:{
clickevent(e){
this.$emit('componentclick', e)
}
}
});

let app = new Vue({
    el: 'ul',
    data: {
        items: [
            { id: 0, name: 'penda' },
            { id: 1, name: 'harla' },
            { id: 2, name: 'calar' },
        ],
    },
    methods: {
        boom: function (e) {
            alert('Aha!');
            console.log(e)
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<ul>
    <item
      @componentclick="boom"
      v-bind:product="item"
      v-bind:key="item.id"
      v-for="item in items"
     ></item>
</ul>

Answer 2

尝试添加.native以获得v-on:click.native="boom"

更多详细信息，请here