vue中native的用法

vue中native的用法

• 官方解释：你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native
• 举例：比如a标签可以直接绑定原生事件，如果你通过自定义封装了button标签，命名mao-button，这时候绑定事件就需要加上native了，下面写一个简单的例子方便理解：

例子

下面有四个按钮分别是普通标签下加native和不加native，自定义标签下加native和不加native

<template>
  <div class="mao">
    <button @click="btn">普通的html标签,不包含native的按钮</button> <br>
    <button @click.native="btn">普通的html标签,包含native的按钮</button>

    <!-- 自定义的标签不加navtive -->
    <mao-button @click="btn"></mao-button>

    <!-- 自定义的组件添加navtive -->
    <mao-button @click.native="btn"></mao-button>
  </div>
</template>

<script>
import MaoButton from '../components/MaoButton.vue'
export default {
    components:{
        MaoButton
    },

    methods: {
        btn(){
            console.log();
        }
    }
}
</script>

效果

运行效果

依次点击事件的效果

总结

在普通标签上加上native会报错且事件无效。在自定义标签上加上navtive，点击事件正常生效，在自定义事件上不加navtive不会报错但事件无效。