Vue如何給組件添加點(diǎn)擊事件?@click.native
給組件添加點(diǎn)擊事件 @click.native
問(wèn)題
畢設(shè)項(xiàng)目中有個(gè)產(chǎn)品展示列表，當(dāng)初用組件寫的，今天想要點(diǎn)擊獲取當(dāng)前選中的產(chǎn)品的數(shù)據(jù)，剛開始直接使用@click寫的，但是點(diǎn)擊并沒有生效。
我嘗試在組件中添加點(diǎn)擊事件，點(diǎn)擊圖片，控制臺(tái)輸出1。
結(jié)果是可以實(shí)現(xiàn)的。
結(jié)論
給vue組件綁定事件時(shí)候，必須加上native ，否則會(huì)認(rèn)為監(jiān)聽的是來(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)文章
vue2.0 兄弟組件(平級(jí))通訊的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue2.0 兄弟組件(平級(jí))通訊的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-01-01
vue監(jiān)聽頁(yè)面滾動(dòng)到某個(gè)高度觸發(fā)事件流程
這篇文章主要介紹了vue監(jiān)聽頁(yè)面滾動(dòng)到某個(gè)高度觸發(fā)事件流程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
由于在項(xiàng)目中需要對(duì)數(shù)據(jù)進(jìn)行可視化處理,也就是用圖表展示,眾所周知echarts是非常強(qiáng)大的插件,所以這篇文章主要給大家介紹了關(guān)于vue+echarts圖表使用的相關(guān)資料,需要的朋友可以參考下2021-09-09
vite+vue3項(xiàng)目集成ESLint與prettier的過(guò)程詳解
這篇文章主要介紹了vite+vue3項(xiàng)目中集成ESLint與prettier的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-09-09
Vue中的基礎(chǔ)過(guò)渡動(dòng)畫及實(shí)現(xiàn)原理解析
這篇文章主要介紹了Vue中的基礎(chǔ)過(guò)渡動(dòng)畫原理解析,需要的朋友可以參考下2018-12-12
vue+springboot實(shí)現(xiàn)項(xiàng)目的CORS跨域請(qǐng)求
這篇文章主要介紹了vue+springboot實(shí)現(xiàn)項(xiàng)目的CORS跨域請(qǐng)求，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介的是?Vue中如何使用?class?類樣式的方法，在vue中為我們提供了幾種方式來(lái)使用class類的樣式，分別是布爾值、表達(dá)式、多類封裝、下面來(lái)看看文章的詳細(xì)介紹內(nèi)容吧,需要的朋友可以參考一下2021-11-11
VUE.CLI4.0配置多頁(yè)面入口的實(shí)現(xiàn)
這篇文章主要介紹了VUE.CLI4.0配置多頁(yè)面入口的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
Vue3+Antd實(shí)現(xiàn)彈框顯示內(nèi)容并加入復(fù)制按鈕
這篇文章主要介紹了Vue3+Antd實(shí)現(xiàn)彈框顯示內(nèi)容并加入復(fù)制按鈕,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
vue element-ui實(shí)現(xiàn)el-table表格多選以及回顯方式
這篇文章主要介紹了vue element-ui實(shí)現(xiàn)el-table表格多選以及回顯方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07