Vue如何給組件添加點(diǎn)擊事件?@click.native
更新時間：2022年10月13日 16:04:53 作者：dyao23
這篇文章主要介紹了Vue如何給組件添加點(diǎn)擊事件?@click.native，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
給組件添加點(diǎn)擊事件 @click.native
問題
畢設(shè)項目中有個產(chǎn)品展示列表，當(dāng)初用組件寫的，今天想要點(diǎn)擊獲取當(dāng)前選中的產(chǎn)品的數(shù)據(jù)，剛開始直接使用@click寫的，但是點(diǎn)擊并沒有生效。
我嘗試在組件中添加點(diǎn)擊事件，點(diǎn)擊圖片，控制臺輸出1。
結(jié)果是可以實(shí)現(xiàn)的。
結(jié)論
給vue組件綁定事件時候，必須加上native ，否則會認(rèn)為監(jiān)聽的是來自Item組件自定義的事件。
那么，兩者同時存在的話結(jié)果如何呢？
點(diǎn)擊圖片，先執(zhí)行item中的函數(shù)，再執(zhí)行組件的點(diǎn)擊事件。
vue中@click.native使用
在組件中時?？吹紷click.native。在項目中遇到后，簡單介紹下：
@click.native是給組件綁定原生事件
我的標(biāo)簽 ‘ListCell’ 是子組件引到當(dāng)前父組件
因?yàn)楫?dāng)父組件中引入子組件的時候，當(dāng)要觸發(fā)子組件點(diǎn)擊事件的時候@click 不生效。
有兩種解決方式
1.@click.native
2.在子組件中添加this.$emit ( “事件名” ，value )方法 將子組件的值傳到父組件。
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue-cli2打包前和打包后的css前綴不一致的問題解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue引用json文件,解決怎么從控制臺把數(shù)據(jù)移到j(luò)son文件中，只需要直接右擊復(fù)制值即可，需要的朋友可以參考下2022-09-09
progressbar組件在一個可以直接運(yùn)行的npm包，通過Yeoman進(jìn)行構(gòu)建，再通過Gulp+Webpack構(gòu)建工具。這篇文章給大家介紹了Vue進(jìn)度條progressbar組件2018-04-04
vue實(shí)現(xiàn)文章點(diǎn)贊和差評功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)文章點(diǎn)贊和差評功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
Vue中計算屬性和監(jiān)聽屬性及數(shù)據(jù)的響應(yīng)式更新和依賴收集基本原理講解
computed是vue的配置選項,它的值是一個對象,其中可定義多個計算屬性,每個計算屬性就是一個函數(shù),下面這篇文章主要給大家介紹了關(guān)于vue中計算屬性computed的詳細(xì)講解,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了淺談vux之x-input使用以及源碼解讀，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
electron-vue+electron-updater實(shí)現(xiàn)自動更新(步驟源碼)
這篇文章主要介紹了electron-vue+electron-updater實(shí)現(xiàn)自動更新,步驟源碼包括autoUpdater.js操控更新js文件，main.js也就是package.json內(nèi)的main指向的js文件，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-10-10
vue中實(shí)時監(jiān)聽div元素盒子的寬高方法
這篇文章主要給大家介紹了關(guān)于vue中如何實(shí)時監(jiān)聽div元素盒子的寬高的相關(guān)資料,在Vue中你可以使用Vue的計算屬性和偵聽器來動態(tài)監(jiān)測元素的高度,文中給出了簡單代碼示例,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue CLI3 如何支持less的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了安裝使用VUE的教程，本文給大家提到了遇到的問題原因分析及解決方法,需要的朋友可以參考下2019-06-06