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