在用 vue 做开发时，新手们肯定会遇到这种问题，直接使用 button 添加原生事件是没有问题的，但是使用自定义组件添加原生事件时，就会发现添加不上。比如我写了两个 button,一个点击让 div 变红，一个点击让 div 变蓝。
App.vue文件
<template>
<div id="app">
<button @click="changeRed">变红</button>
<!-- 使用 Btn 组件 并添加原生事件 -->
<Btn @click="changeBlue"></Btn>
<div :class="box"></div>
</div></template><script>// 引入 Btn 这个组件import Btn from './assets/components/Btn.vue'export default { name: 'app',
data () { return { box: 'yellow'
}
}, methods: {
changeRed(){ this.box = 'red'
},
changeBlue(){ this.box = 'blue'
}
}, // 组件 注册
components: {
Btn
}
}</script><style>.yellow{ width: 200px; height: 200px; background: #ff0;
}.red{ width: 200px; height: 200px; background: #f00;
}.blue{ width: 200px; height: 200px; background: #00f;
}</style>Btn.vue 文件
<template> <div class="btn"> <button>变蓝</button> </div></template>
点击变色.gif
会发现 Btn 的绑定事件无效。其实 vue 官方是有提供对应的方法的， 给组件绑定原生事件，就是在自定义组件 Btn 的原生事件后面加个 .native 后缀就好了。
App.vue文件
<template> <div id="app"> <button @click="changeRed">变红</button> <!-- 使用 Btn 组件 并添加事件 --> <Btn @click.native="changeBlue"></Btn> <div :class="box"></div> </div></template>
效果：
点击变色-1.gif