vue自定義組件如何添加使用原生事件
自定義組件如何添加使用原生事件
自定義組件(Components)是vue的重要知識(shí)塊之一，使用中不少人會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題：為什么我在組件里綁定click事件不起作用？這里先看看原因吧。
在自定義組件中直接綁定原生事件vue可是"不待見(jiàn)"的，它會(huì)認(rèn)為你沒(méi)有定義這個(gè)事件，所以沒(méi)有任何反應(yīng)。
哪些是原生事件？
例如click單擊、mouseover鼠標(biāo)移入、mouseout鼠標(biāo)移出、keyup鍵盤(pán)按下抬起、keydown鍵盤(pán)按下…等等一系列由官方提供的事件都是原生事件。那么咋辦？
. $emit()傳遞
<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>第一種方法是通過(guò)$emit()傳遞事件。如代碼：我們?cè)谧远x組件Jsxj中設(shè)置模板，在模板中<p>原生元素上觸發(fā)原生click事件，調(diào)用函數(shù)pChange()，函數(shù)用$emit()向上傳遞自定義事件click，父組件Jsxj接收到這個(gè)事件，于是便可以正常觸發(fā)click。
. native屬性
<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>第二種方法相對(duì)簡(jiǎn)單。
代碼大同小異，不過(guò)我們不再用$emit()從子向父?jìng)鬟f自定義事件，太麻煩了，而是用native屬性幫忙@click.native="JsxjChange"，這樣組件就會(huì)知道這是原生事件click，調(diào)用相應(yīng)的函數(shù)。
vue使用原生事件
在項(xiàng)目中用到element ui 這個(gè)ui框架，有些組件沒(méi)有封裝的事件，例如click事件 ，我在使用時(shí)感覺(jué)不起作用，后來(lái)查看vue官方文檔，發(fā)現(xiàn)有些原生事件是不提供，還有我們自定義的組件也是不能直接使用click事件的 ，需要在click事件后寫(xiě)上.native才能生效
即 例如：
<el-card @click.native = "enter"></el-card>
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue使用recorder.js實(shí)現(xiàn)錄音功能
這篇文章主要為大家詳細(xì)介紹了vue使用recorder.js實(shí)現(xiàn)錄音功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
Vue3.5?發(fā)布已近半年,這篇文章主要來(lái)和大家技術(shù)一下它常用的新增和改動(dòng)特性,文中的示例代碼講解詳細(xì),有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-01-01
uniapp開(kāi)發(fā)打包成H5部署到服務(wù)器的詳細(xì)步驟
前端使用uniapp開(kāi)發(fā)項(xiàng)目完成后，需要將頁(yè)面打包，生成H5的靜態(tài)文件，部署在服務(wù)器上這樣通過(guò)服務(wù)器鏈接地址，直接可以在手機(jī)上點(diǎn)開(kāi)來(lái)訪問(wèn)，下面小編給大家講解uniapp開(kāi)發(fā)打包成H5部署到服務(wù)器的步驟，感興趣的朋友一起看看吧2022-11-11
解決vue項(xiàng)目本地啟動(dòng)時(shí)無(wú)法攜帶cookie的問(wèn)題
這篇文章主要介紹了解決vue項(xiàng)目本地啟動(dòng)時(shí)無(wú)法攜帶cookie,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-02-02
本文主要介紹了Vue中的性能優(yōu)化方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue商品控件與購(gòu)物車(chē)聯(lián)動(dòng)效果的實(shí)例代碼
這篇文章主要介紹了Vue商品控件與購(gòu)物車(chē)聯(lián)動(dòng)效果的實(shí)例代碼，代碼簡(jiǎn)單易懂非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-07-07
vue項(xiàng)目打包后放服務(wù)器非根目錄下圖片找不到問(wèn)題
這篇文章主要介紹了vue項(xiàng)目打包后放服務(wù)器非根目錄下圖片找不到問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
vue3開(kāi)啟攝像頭并進(jìn)行拍照的實(shí)現(xiàn)示例
本文主要介紹了vue3開(kāi)啟攝像頭并進(jìn)行拍照的實(shí)現(xiàn)示例,主要是使用navigator.mediaDevices.getUserMedia這個(gè)API來(lái)實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
這篇文章主要介紹了vue3 provide與inject的使用小技巧，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue如何設(shè)置輸入框只能輸入數(shù)字且只能輸入小數(shù)點(diǎn)后兩位,并且不能輸入減號(hào)
這篇文章主要介紹了vue如何設(shè)置輸入框只能輸入數(shù)字且只能輸入小數(shù)點(diǎn)后兩位,并且不能輸入減號(hào)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05