Vue如何給組件添加點擊事件?@click.native
更新時間：2022年10月13日 16:04:53 作者：dyao23
這篇文章主要介紹了Vue如何給組件添加點擊事件?@click.native，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
給組件添加點擊事件 @click.native
問題
畢設(shè)項目中有個產(chǎn)品展示列表，當(dāng)初用組件寫的，今天想要點擊獲取當(dāng)前選中的產(chǎn)品的數(shù)據(jù)，剛開始直接使用@click寫的，但是點擊并沒有生效。
我嘗試在組件中添加點擊事件，點擊圖片，控制臺輸出1。
結(jié)果是可以實現(xiàn)的。
結(jié)論
給vue組件綁定事件時候，必須加上native ，否則會認(rèn)為監(jiān)聽的是來自Item組件自定義的事件。
那么，兩者同時存在的話結(jié)果如何呢？
點擊圖片，先執(zhí)行item中的函數(shù)，再執(zhí)行組件的點擊事件。
vue中@click.native使用
在組件中時?？吹紷click.native。在項目中遇到后，簡單介紹下：
@click.native是給組件綁定原生事件
我的標(biāo)簽 ‘ListCell’ 是子組件引到當(dāng)前父組件
因為當(dāng)父組件中引入子組件的時候，當(dāng)要觸發(fā)子組件點擊事件的時候@click 不生效。
有兩種解決方式
1.@click.native
2.在子組件中添加this.$emit ( “事件名” ，value )方法 將子組件的值傳到父組件。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue2.0 兄弟組件(平級)通訊的實現(xiàn)代碼，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-01-01
vue監(jiān)聽頁面滾動到某個高度觸發(fā)事件流程
這篇文章主要介紹了vue監(jiān)聽頁面滾動到某個高度觸發(fā)事件流程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
由于在項目中需要對數(shù)據(jù)進行可視化處理,也就是用圖表展示,眾所周知echarts是非常強大的插件,所以這篇文章主要給大家介紹了關(guān)于vue+echarts圖表使用的相關(guān)資料,需要的朋友可以參考下2021-09-09
vite+vue3項目集成ESLint與prettier的過程詳解
這篇文章主要介紹了vite+vue3項目中集成ESLint與prettier的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue中的基礎(chǔ)過渡動畫原理解析,需要的朋友可以參考下2018-12-12
vue+springboot實現(xiàn)項目的CORS跨域請求
這篇文章主要介紹了vue+springboot實現(xiàn)項目的CORS跨域請求，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介的是?Vue中如何使用?class?類樣式的方法，在vue中為我們提供了幾種方式來使用class類的樣式，分別是布爾值、表達(dá)式、多類封裝、下面來看看文章的詳細(xì)介紹內(nèi)容吧,需要的朋友可以參考一下2021-11-11
這篇文章主要介紹了VUE.CLI4.0配置多頁面入口的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
Vue3+Antd實現(xiàn)彈框顯示內(nèi)容并加入復(fù)制按鈕
這篇文章主要介紹了Vue3+Antd實現(xiàn)彈框顯示內(nèi)容并加入復(fù)制按鈕,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12
vue element-ui實現(xiàn)el-table表格多選以及回顯方式
這篇文章主要介紹了vue element-ui實現(xiàn)el-table表格多選以及回顯方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07