vue中@click綁定事件點(diǎn)擊不生效的原因及解決方案
原因:
根據(jù)Vue2.0官方文檔關(guān)于父子組件通訊的原則,父組件通過(guò)prop傳遞數(shù)據(jù)給子組件,子組件觸發(fā)事件給父組件。但父組件想在子組件上監(jiān)聽(tīng)自己的click的話,需要加上native修飾符。
解決方法:
方法1:在@click后加上.native(監(jiān)聽(tīng)根元素的原生事件,使用 .native 修飾符)
@click.native = "..."
方法2:向外發(fā)送click事件
在 methods 內(nèi)添加 _click 方法:
methods: { _click: function () { this.$emit('click', function () { //... }) } }
擴(kuò)展知識(shí)點(diǎn):
Vue中@click不生效的解決辦法
問(wèn)題產(chǎn)生的原因:
如果是普通的HTML,@click可以觸發(fā)。
如果是使用ElementUI組件和路由,@click會(huì)失效。
因?yàn)閂ue使用的是一套自己的事件傳遞機(jī)制,@click等事件是經(jīng)過(guò)Vue封裝的,需要為 @click 添加標(biāo)識(shí)符 .native
<el-button type="primary" @click.native="clickFunction()">點(diǎn)擊按鈕</el-button>
到此這篇關(guān)于vue中@click綁定事件點(diǎn)擊不生效的解決方案的文章就介紹到這了,更多相關(guān)vue中@click綁定事件點(diǎn)擊不生效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
在Vue3中使用BabylonJs開(kāi)發(fā)?3D的初體驗(yàn)
這篇文章主要介紹了在?Vue3?中使用?BabylonJs?開(kāi)發(fā)?3D?是什么體驗(yàn),在本文中,向您展示了如何創(chuàng)建?Vue?組件、Babylon?類、在畫(huà)布上渲染場(chǎng)景以及創(chuàng)建?3D?網(wǎng)格,需要的朋友可以參考下2022-07-07van-uploader保存文件到后端回顯后端接口返回的數(shù)據(jù)
前端開(kāi)發(fā)想省時(shí)間就是要找框架呀,下面這篇文章主要給大家介紹了關(guān)于van-uploader保存文件到后端回顯后端接口返回的數(shù)據(jù),文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06vue實(shí)現(xiàn)路由懶加載及組件懶加載的方式
懶加載簡(jiǎn)單來(lái)說(shuō)就是延遲加載或按需加載,即在需要的時(shí)候的時(shí)候進(jìn)行加載。這篇文章主要介紹了vue路由懶加載及組件懶加載 ,需要的朋友可以參考下2019-06-06vue.js默認(rèn)路由不加載linkActiveClass問(wèn)題的解決方法
這篇文章主要給大家介紹了關(guān)于vue.js默認(rèn)路由不加載linkActiveClass問(wèn)題的解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起看看吧。2017-12-12vue 如何添加全局函數(shù)或全局變量以及單頁(yè)面的title設(shè)置總結(jié)
本篇文章主要介紹了vue 如何添加全局函數(shù)或全局變量以及單頁(yè)面的title設(shè)置總結(jié),非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-06-06vue3如何添加eslint校驗(yàn)(eslint-plugin-vue)
這篇文章主要介紹了vue3如何添加eslint校驗(yàn)(eslint-plugin-vue),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01Vue如何調(diào)用接口請(qǐng)求頭增加參數(shù)
這篇文章主要介紹了Vue如何調(diào)用接口請(qǐng)求頭增加參數(shù),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01Jeeplus-vue?實(shí)現(xiàn)文件的上傳功能
這篇文章主要介紹了Jeeplus-vue?實(shí)現(xiàn)文件的上傳,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-09-09