如何点击整个vuejs组件

Question

我有组件

我想点击后运行方法

<my-component @click="showOtherDiv"></my-component>

我在主app方法上有这个方法

var app = new Vue({
    el: '#app',

    data: {},

    methods: {
        showOtherDiv : function(){
            alert('Some message');
        }
    }
});

但似乎"点击"不适用于完整组件

Answer 1

1. 注册您的组件,并在里面声明处理程序方法:

   Vue.component('my-component', {
       // ...
       methods: {
           showOtherDiv : function(){
               alert('Some message');
           }
       }
   });
   

2. 将.native修饰符添加到事件名称:

   <my-component @click.native="showOtherDiv"></my-component>
   

   来自文档:

   将本机事件绑定到组件

   [...]当您想要在组件的根元素上侦听本机事件时,您可以使用.native修饰符v-on.