vue中@click的native修饰符

使用vue组件时，如果想要在组件上绑定事件，@click是不起作用的，因为@click会默认成监听来自子组件自定义的事件，而不是当前组件的点击事件。

所以想实现组件的点击事件，需要在后面加上native修饰符。

 

举例如下：

【父】

<template>
  <div>这是父组件
    <son-com @click="sonClick"></son-com>
  </div>
</template>

<script>
import sonCom from "./components/sonCom.vue";
export default {
  components: {
    "son-com": sonCom,
  },
  methods: {
    sonClick() {
      console.log('点击了子组件');
    },
  },
};
</script>

【子】

<template>
  <div class="box">这是子组件</div>
</template>

<style>
.box {
  height: 80px;
  width: 130px;
  background: rgb(184, 184, 250);
}
</style>

 

结果：

@click="sonClick" 的控制台输出为空

 

@click.native="sonClick" 的控制台输出为“点击了子组件”