溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下vue自定義組件怎么添加使用原生事件的相關(guān)知識點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
自定義組件(Components)是vue的重要知識塊之一，使用中不少人會發(fā)現(xiàn)一個問題：為什么我在組件里綁定click事件不起作用？這里先看看原因吧。
在自定義組件中直接綁定原生事件vue可是"不待見"的，它會認(rèn)為你沒有定義這個事件，所以沒有任何反應(yīng)。
哪些是原生事件？
例如click單擊、mouseover鼠標(biāo)移入、mouseout鼠標(biāo)移出、keyup鍵盤按下抬起、keydown鍵盤按下…等等一系列由官方提供的事件都是原生事件。那么咋辦？
<body> <div id="app"> <Jsxj :jsxj="message" @click="JsxjChange"></Jsxj> </div> </body>
<script>
var vm = new Vue({
el:"#app",
data:{
message:"Hello World"
},
components:{
Jsxj:{
props:['jsxj'],
template:`<p @click="pChange">{{jsxj}}</p>`,
methods: {
pChange(){
this.$emit("click")
}
},
}
},
methods: {
JsxjChange(){
this.message="Hi, Jsxj"
}
},
})
</script>第一種方法是通過$emit()傳遞事件。如代碼：我們在自定義組件Jsxj中設(shè)置模板，在模板中<p>原生元素上觸發(fā)原生click事件，調(diào)用函數(shù)pChange()，函數(shù)用$emit()向上傳遞自定義事件click，父組件Jsxj接收到這個事件，于是便可以正常觸發(fā)click。
<body> <div id="app"> <Jsxj :jsxj="message" @click.native="JsxjChange"></Jsxj> </div> </body>
<script>
var vm = new Vue({
el:"#app",
data:{
message:"Hello World"
},
components:{
Jsxj:{
props:['jsxj'],
template:`<p>{{jsxj}}</p>`
}
},
methods: {
JsxjChange(){
this.message="Hi, Jsxj"
}
},
})
</script>第二種方法相對簡單。
代碼大同小異，不過我們不再用$emit()從子向父傳遞自定義事件，太麻煩了，而是用native屬性幫忙@click.native="JsxjChange"，這樣組件就會知道這是原生事件click，調(diào)用相應(yīng)的函數(shù)。
在項目中用到element ui 這個ui框架，有些組件沒有封裝的事件，例如click事件 ，我在使用時感覺不起作用，后來查看vue官方文檔，發(fā)現(xiàn)有些原生事件是不提供，還有我們自定義的組件也是不能直接使用click事件的 ，需要在click事件后寫上.native才能生效
即 例如：
<el-card @click.native = "enter"></el-card>
以上就是“vue自定義組件怎么添加使用原生事件”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼