vue中@click綁定事件點擊不生效的原因及解決方案
更新時間：2022年12月07日 10:35:25 作者：Jiang_JY
根據Vue2.0官方文檔關于父子組件通訊的原則，父組件通過prop傳遞數據給子組件，子組件觸發(fā)事件給父組件，這篇文章主要介紹了vue中@click綁定事件點擊不生效的解決方案,需要的朋友可以參考下
原因：
根據Vue2.0官方文檔關于父子組件通訊的原則，父組件通過prop傳遞數據給子組件，子組件觸發(fā)事件給父組件。但父組件想在子組件上監(jiān)聽自己的click的話，需要加上native修飾符。
解決方法：
方法1：在@click后加上.native（監(jiān)聽根元素的原生事件，使用 .native 修飾符）
@click.native = "..."
方法2：向外發(fā)送click事件
在 methods 內添加 _click 方法：
methods: {
_click: function () {
this.$emit('click', function () {
//...
})
}
}擴展知識點：
Vue中@click不生效的解決辦法
問題產生的原因：
如果是普通的HTML，@click可以觸發(fā)。
如果是使用ElementUI組件和路由，@click會失效。
因為Vue使用的是一套自己的事件傳遞機制，@click等事件是經過Vue封裝的，需要為 @click 添加標識符 .native
<el-button type="primary" @click.native="clickFunction()">點擊按鈕</el-button>
到此這篇關于vue中@click綁定事件點擊不生效的解決方案的文章就介紹到這了,更多相關vue中@click綁定事件點擊不生效內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
微信、支付寶支付密碼時的密碼輸入框大家都很熟悉，本文主要介紹了vue3如何實現?6位支付密碼輸入框，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
Vue+ElementUI實現表單動態(tài)渲染、可視化配置的方法
這篇文章主要介紹了Vue+ElementUI實現表單動態(tài)渲染、可視化配置的方法,需要的朋友可以參考下2018-03-03
這篇文章主要介紹了vue router 用戶登陸功能的實例代碼,主要用到H5中的會話存儲（sessionStorage）、vue-router路由前置操作、路由元信息(meta)等知識點，本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2019-04-04
在實際應用場景中,假如有一個下載或者導出請求,數據量非常大的情況下,接口響應的會很慢,這時候我我們想中斷請求,該怎么做呢？本文給大家介紹了axios請求中斷的幾種方法,需要的朋友可以參考下2024-10-10
基于vue-router 多級路由redirect 重定向的問題
今天小編就為大家分享一篇基于vue-router 多級路由redirect 重定向的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue-devtools是一款基于chrome瀏覽器的插件，用于vue應用的調試，這款vue調試神器可以極大地提高我們的調試效率。幫助我們快速的調試開發(fā)vue應用。這篇文章主要介紹了VUE 配置vue-devtools調試工具及安裝步驟 ,需要的朋友可以參考下2018-09-09
vue實現動態(tài)路由添加功能的簡單方法(無廢話版本)
ue動態(tài)路由(約定路由),聽起來好像很玄乎的樣子,但是你要是理解了實現思路,你會發(fā)現沒有想象中的那么難,下面這篇文章主要給大家介紹了關于vue實現動態(tài)路由添加功能的簡單方法,需要的朋友可以參考下2023-02-02
vue中動態(tài)路由加載組件,找不到module問題及解決
這篇文章主要介紹了vue中動態(tài)路由加載組件,找不到module問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
今天小編就為大家分享一篇解決vue點擊控制單個樣式的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue-router動態(tài)設置頁面title的實例講解
今天小編就為大家分享一篇vue-router動態(tài)設置頁面title的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08