VUE div click無效的問題及解決
VUE div click無效
每逢半年 總要遇到一個(gè)前端詭異問題，花了個(gè)把小時(shí)才解決，記錄一下
? ? <div v-else-if="item.type ===7" class="left-title bgc-opacity" :style="styleObj" @click="changeliveisResize(true)">
? ? ? <!-- 字幕 -->
? ? ? <div v-if="!item.text">
? ? ? ? <div class="text-son">{{ $t('program.caption') }}</div>
? ? ? </div>
? ? ? <div v-else>
? ? ? ? <div class="left-align-text caption-text" :style="{fontSize: item.fontSize + 'px', color: item.fontColor}"> {{ item.text }} </div>
? ? ? </div>
? ? </div>當(dāng)@Click寫在里面div時(shí) 無反應(yīng) 寫在外面有反應(yīng)
當(dāng)@Click寫在里面DIV時(shí) 把外面的:style="styleObj"移出 也有反應(yīng)
@click事件無效？@click.native中.native的含義和使用
記錄@click綁定事件的一個(gè)坑
問題描述：
今天開發(fā)的時(shí)候，給組件綁定了@click事件，但是事件卻沒有執(zhí)行。
代碼如下：
<template>
<div>
?? ?<span>父組件頁(yè)面</span>
?? ? <search @click="onSubmit"></search>
</div>
</template>
<script>
methods: {
?? ?onSubmit() {
?? ??? ?alert('show')
?? ?}
}
</script>子頁(yè)面search.vue
<template> ?? ?<div> ?? ??? ?<button>點(diǎn)擊查找</button> ?? ?</div> </template> <script> </script>
search是我自己封裝的一個(gè)組件，問題就出在這兒，search是子組件，想要直接在父組件觸發(fā)click方法。
方案一：不改變子組件頁(yè)面的話，父頁(yè)面就必須這么寫
<search @click.native="onSubmit"></search>
方案二：
父頁(yè)面
<template>
<div>
?? ?<span>父組件頁(yè)面</span>
?? ? <search @click="onSubmit"></search>
</div>
</template>
<script>
methods: {
?? ?onSubmit() {
?? ??? ?alert('show')
?? ?}
}
</script>子頁(yè)面search
<template>
?? ?<div>
?? ??? ?<button @click='handleClick'></button>
?? ?</div>
</template>
<script>
methods: {
?? ?handleClick() {
?? ??? ?this.$emit('click')
?? ?}
}
</script>至于為什么加上.native就可以直接觸發(fā)事件，是因?yàn)槭褂?native之后父級(jí)組件可以像處理原生的DOM事件一樣通過 v-on 監(jiān)聽子組件實(shí)例的任意事件(@即為v-on:的簡(jiǎn)寫)，如果不加natvie，會(huì)認(rèn)為監(jiān)聽的是來自子組件search.vue自定義的事件，然而子組件內(nèi)也沒有使用$emit()來將子組件的觸發(fā)事件拋出，因此onSubmit()方法沒有執(zhí)行。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了使用vue制作滑動(dòng)標(biāo)簽，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
Vue路由this.route.push跳轉(zhuǎn)頁(yè)面不刷新的解決方案
這篇文章主要介紹了Vue路由this.route.push跳轉(zhuǎn)頁(yè)面不刷新的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-07-07
這篇文章主要介紹了Vue 項(xiàng)目分環(huán)境打包的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了自定義Vue組件打包、發(fā)布到npm及使用教程 ,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
利用Vue3實(shí)現(xiàn)拖拽定制化首頁(yè)功能
vue3正式版已經(jīng)發(fā)布大半年了,咱也得緊跟時(shí)代潮流,vue3帶來的很多改變,下面這篇文章主要給大家介紹了關(guān)于利用Vue3實(shí)現(xiàn)拖拽定制化首頁(yè)功能的相關(guān)資料,需要的朋友可以參考下2022-05-05
本篇文章主要介紹了詳解Vue 動(dòng)態(tài)添加模板的幾種方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
vue-electron使用serialport時(shí)問題解決方案
這篇文章主要介紹了vue-electron使用serialport時(shí)問題解決方案,本篇文章通過簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
本文主要介紹了Vue中的性能優(yōu)化方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue ElementUI中el-table表格嵌套樣式問題小結(jié)
這篇文章主要介紹了Vue ElementUI中el-table表格嵌套樣式問題小結(jié),兩個(gè)表格嵌套,當(dāng)父表格有children數(shù)組時(shí)子表格才展示,對(duì)Vue ElementUI中el-table表格嵌套樣式問題感興趣的朋友跟隨小編一起看看吧2024-02-02
vue中PC端使用高德地圖實(shí)現(xiàn)搜索定位、地址標(biāo)記、彈窗顯示定位詳情(完整實(shí)例)
這篇文章主要介紹了vue中PC端使用高德地圖實(shí)現(xiàn)搜索定位、地址標(biāo)記、彈窗顯示定位詳情,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07