javascript - 单击事件侦听器不适用于 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永远不会触发事件侦听器。你知道原因吗？

标签： javascriptvue.js

Answer 1

用作@[e-mail]="boom"回答。或者从父组件绑定自定义并从子组件发出。请运行并检查以下代码。

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>