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-07
組件(Component)是 Vue.js 最強(qiáng)大的功能之一。 組件可以擴(kuò)展 HTML 元素,封裝可重用的代碼。下面這篇文章主要給大家介紹了關(guān)于Vue.js組件間循環(huán)引用的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。2017-12-12
van-uploader保存文件到后端回顯后端接口返回的數(shù)據(jù)
前端開(kāi)發(fā)想省時(shí)間就是要找框架呀,下面這篇文章主要給大家介紹了關(guān)于van-uploader保存文件到后端回顯后端接口返回的數(shù)據(jù),文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
vue實(shí)現(xiàn)路由懶加載及組件懶加載的方式
懶加載簡(jiǎn)單來(lái)說(shuō)就是延遲加載或按需加載，即在需要的時(shí)候的時(shí)候進(jìn)行加載。這篇文章主要介紹了vue路由懶加載及組件懶加載 ,需要的朋友可以參考下2019-06-06
Vue是可以自定義指令的,最近學(xué)習(xí)過(guò)程中遇見(jiàn)了一個(gè)需要懶加載的功能，發(fā)現(xiàn)網(wǎng)上這方面的資料較少，所以下面這篇文章主要給大家介紹了關(guān)于Vue.js如何實(shí)現(xiàn)路由懶加載的相關(guān)資料，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-08-08
vue.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-12
vue 如何添加全局函數(shù)或全局變量以及單頁(yè)面的title設(shè)置總結(jié)
本篇文章主要介紹了vue 如何添加全局函數(shù)或全局變量以及單頁(yè)面的title設(shè)置總結(jié)，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-06-06
vue3如何添加eslint校驗(yàn)(eslint-plugin-vue)
這篇文章主要介紹了vue3如何添加eslint校驗(yàn)(eslint-plugin-vue),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
Vue如何調(diào)用接口請(qǐng)求頭增加參數(shù)
這篇文章主要介紹了Vue如何調(diào)用接口請(qǐng)求頭增加參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Jeeplus-vue?實(shí)現(xiàn)文件的上傳功能
這篇文章主要介紹了Jeeplus-vue?實(shí)現(xiàn)文件的上傳，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-09-09