vue中@click綁定事件點(diǎn)擊不生效的解決
更新時(shí)間：2022年08月05日 14:34:16 作者：Jiang_JY
這篇文章主要介紹了vue中@click綁定事件點(diǎn)擊不生效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
@click綁定事件點(diǎn)擊不生效
原因
根據(jù)Vue2.0官方文檔關(guān)于父子組件通訊的原則，父組件通過prop傳遞數(shù)據(jù)給子組件，子組件觸發(fā)事件給父組件。但父組件想在子組件上監(jiān)聽自己的click的話，需要加上native修飾符。
解決方法
方法1：在@click后加上.native（監(jiān)聽根元素的原生事件，使用 .native 修飾符）
@click.native = "..."
方法2：向外發(fā)送click事件
在 methods 內(nèi)添加 _click 方法：
? ? methods: {
? ? ? _click: function () {
? ? ? ? this.$emit('click', function () {
? ? ? ? ? //...
? ? ? ? })
? ? ? }
? ? }@click中不能使用三則表達(dá)式原因
@click="urgentchargeTime?urgentTime:''" //這么寫的話會(huì)讓vue執(zhí)行的時(shí)候去data里面查找,但是我們是要用的函數(shù)
修改為：
@click="urgentchargeTime?urgentTime():''" //vue通過第一個(gè)數(shù)去data里面找,然后通過data里面的值進(jìn)行去查找函數(shù)對(duì)象里面的函數(shù)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue Object.defineProperty及ProxyVue實(shí)現(xiàn)雙向數(shù)據(jù)綁定
這篇文章主要介紹了Vue Object.defineProperty及ProxyVue實(shí)現(xiàn)雙向數(shù)據(jù)綁定,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
Vue實(shí)現(xiàn)簡(jiǎn)單圖片切換效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單圖片切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
vue3配置permission.js和router、pinia實(shí)現(xiàn)路由攔截的簡(jiǎn)單步驟
這篇文章主要介紹了如何在場(chǎng)景網(wǎng)站中實(shí)現(xiàn)對(duì)未登錄用戶訪問的攔截,通過配置Pinia,創(chuàng)建一個(gè)user.js文件來存儲(chǔ)用戶數(shù)據(jù),并在main.js中進(jìn)行配置,同時(shí)通過在router目錄下創(chuàng)建permission.js文件,可以實(shí)現(xiàn)對(duì)未登錄用戶的攔截,需要的朋友可以參考下2024-11-11
vue使用高德地圖點(diǎn)擊下鉆上浮效果的實(shí)現(xiàn)思路
這篇文章主要介紹了vue使用高德地圖點(diǎn)擊下鉆 上浮效果的實(shí)現(xiàn)思路,本文以浙江省為例通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2019-10-10
本文主要介紹了vue usePop彈窗控制器的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要介紹了elementui中使用el-tree控件懶加載和局部刷新，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue引入微信sdk 實(shí)現(xiàn)分享朋友圈獲取地理位置功能
這篇文章主要介紹了h5 vue引入微信sdk 實(shí)現(xiàn)分享朋友圈，分享給朋友，獲取地理位置功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
Vuex結(jié)合storage實(shí)現(xiàn)用戶信息本地存儲(chǔ)方式
這篇文章主要介紹了Vuex結(jié)合storage實(shí)現(xiàn)用戶信息本地存儲(chǔ)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue使用el-tree 懶加載進(jìn)行增刪改查功能的實(shí)現(xiàn)
這篇文章主要介紹了Vue使用el-tree 懶加載進(jìn)行增刪改查,以懶加載的形式展示，目錄根據(jù)需求需要有新增 編輯 刪除 操作以及操作后的刷新樹結(jié)構(gòu)，具體實(shí)現(xiàn)代碼跟隨小編一起看看吧2021-08-08
Vue使用json-server進(jìn)行后端數(shù)據(jù)模擬功能
這篇文章主要介紹了Vue使用json-server進(jìn)行后端數(shù)據(jù)模擬功能,非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-04-04