上一篇：axios如何全局注冊(cè)
在用 vue 做開(kāi)發(fā)時(shí)憔晒，新手們肯定會(huì)遇到這種問(wèn)題租副，直接使用 button 添加原生事件是沒(méi)有問(wèn)題的舟茶，但是使用自定義組件添加原生事件時(shí)闸餐，就會(huì)發(fā)現(xiàn)添加不上渗柿。比如我寫(xiě)了兩個(gè) button,一個(gè)點(diǎn)擊讓 div 變紅个盆，一個(gè)點(diǎn)擊讓 div 變藍(lán)。
App.vue文件
<template>
<div id="app">
<button @click="changeRed">變紅</button>
<!-- 使用 Btn 組件 并添加原生事件 -->
<Btn @click="changeBlue"></Btn>
<div :class="box"></div>
</div>
</template>
<script>
// 引入 Btn 這個(gè)組件
import Btn from './assets/components/Btn.vue'
export default {
name: 'app',
data () {
return {
box: 'yellow'
}
},
methods: {
changeRed(){
this.box = 'red'
},
changeBlue(){
this.box = 'blue'
}
},
// 組件 注冊(cè)
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>變藍(lán)</button>
</div>
</template>
點(diǎn)擊變色.gif
會(huì)發(fā)現(xiàn)
Btn 的綁定事件無(wú)效朵栖。其實(shí) vue 官方是有提供對(duì)應(yīng)的方法的颊亮， 給組件綁定原生事件，就是在自定義組件 Btn 的原生事件后面加個(gè) .native 后綴就好了陨溅。
App.vue文件
<template>
<div id="app">
<button @click="changeRed">變紅</button>
<!-- 使用 Btn 組件 并添加事件 -->
<Btn @click.native="changeBlue"></Btn>
<div :class="box"></div>
</div>
</template>
效果：
點(diǎn)擊變色-1.gif
