如何点击整个vuejs组件

Fat*_*tas 3 vue-component vuejs2

我有组件

我想点击后运行方法

<my-component @click="showOtherDiv"></my-component>
Run Code Online (Sandbox Code Playgroud)

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

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

    data: {},

    methods: {
        showOtherDiv : function(){
            alert('Some message');
        }
    }
});
Run Code Online (Sandbox Code Playgroud)

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

Eli*_*lka 7

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

    Vue.component('my-component', {
        // ...
        methods: {
            showOtherDiv : function(){
                alert('Some message');
            }
        }
    });
    
    Run Code Online (Sandbox Code Playgroud)
  2. .native修饰符添加到事件名称:

    <my-component @click.native="showOtherDiv"></my-component>
    
    Run Code Online (Sandbox Code Playgroud)

    来自文档:

    将本机事件绑定到组件

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