1. 给vue组件绑定事件时候，必须加上native ，不然不会生效（监听根元素的原生事件，使用 .native 修饰符）

  2. 等同于在自组件中： 子组件内部处理click事件然后向外发送click事件：$emit("click".fn)

如果你想在某个组件的根元素上绑定事件，直接使用 @click=''function' 是不生效的，我们可以添加.native修饰符 @click.native=''function''，请看以下demo:

实现的功能是点击 的时候打印“test”

1.父组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
    <div>
       <!-- 错误写法 --> 
       <a-com @click='warpClick'></a-com>
       <!-- 正确写法 --> 
       <a-com @click.native='warpClick'></a-com>
    </div>
</template>

<script>
    import aCom from '../components/comA.vue'
    export default{
        components:{
            'a-com':aCom
        },
        methods:{
            warpClick(){
                console.log('test');
            }
        }
    }
</script>

<style>
</style>

2.子组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
    <div class="box-a">
        组件A的内容
    </div>
</template>

<script>
</script>

<style>
    .box-a{
        height: 100px;
        width: 300px;
        background: lavender;
    }
</style>