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)文章
微信、支付寶支付密碼時(shí)的密碼輸入框大家都很熟悉，本文主要介紹了vue3如何實(shí)現(xiàn)?6位支付密碼輸入框，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
Vue+ElementUI實(shí)現(xiàn)表單動(dòng)態(tài)渲染、可視化配置的方法
這篇文章主要介紹了Vue+ElementUI實(shí)現(xiàn)表單動(dòng)態(tài)渲染、可視化配置的方法,需要的朋友可以參考下2018-03-03
這篇文章主要介紹了vue router 用戶登陸功能的實(shí)例代碼,主要用到H5中的會(huì)話存儲(chǔ)（sessionStorage）、vue-router路由前置操作、路由元信息(meta)等知識(shí)點(diǎn)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2019-04-04
在實(shí)際應(yīng)用場(chǎng)景中,假如有一個(gè)下載或者導(dǎo)出請(qǐng)求,數(shù)據(jù)量非常大的情況下,接口響應(yīng)的會(huì)很慢,這時(shí)候我我們想中斷請(qǐng)求,該怎么做呢？本文給大家介紹了axios請(qǐng)求中斷的幾種方法,需要的朋友可以參考下2024-10-10
基于vue-router 多級(jí)路由redirect 重定向的問(wèn)題
今天小編就為大家分享一篇基于vue-router 多級(jí)路由redirect 重定向的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
VUE 配置vue-devtools調(diào)試工具及安裝方法
vue-devtools是一款基于chrome瀏覽器的插件，用于vue應(yīng)用的調(diào)試，這款vue調(diào)試神器可以極大地提高我們的調(diào)試效率。幫助我們快速的調(diào)試開(kāi)發(fā)vue應(yīng)用。這篇文章主要介紹了VUE 配置vue-devtools調(diào)試工具及安裝步驟 ,需要的朋友可以參考下2018-09-09
vue實(shí)現(xiàn)動(dòng)態(tài)路由添加功能的簡(jiǎn)單方法(無(wú)廢話版本)
ue動(dòng)態(tài)路由(約定路由),聽(tīng)起來(lái)好像很玄乎的樣子,但是你要是理解了實(shí)現(xiàn)思路,你會(huì)發(fā)現(xiàn)沒(méi)有想象中的那么難,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)動(dòng)態(tài)路由添加功能的簡(jiǎn)單方法,需要的朋友可以參考下2023-02-02
vue中動(dòng)態(tài)路由加載組件,找不到module問(wèn)題及解決
這篇文章主要介紹了vue中動(dòng)態(tài)路由加載組件,找不到module問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
解決vue點(diǎn)擊控制單個(gè)樣式的問(wèn)題
今天小編就為大家分享一篇解決vue點(diǎn)擊控制單個(gè)樣式的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue-router動(dòng)態(tài)設(shè)置頁(yè)面title的實(shí)例講解
今天小編就為大家分享一篇vue-router動(dòng)態(tài)設(shè)置頁(yè)面title的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08