快捷導航

VUE div click無效的問題及解決

更新時間：2023年01月22日 10:29:23 作者：如花菇?jīng)?

這篇文章主要介紹了VUE div click無效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

VUE div click無效

每逢半年總要遇到一個前端詭異問題，花了個把小時才解決，記錄一下

? ? <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>

當@Click寫在里面div時無反應(yīng) 寫在外面有反應(yīng)

當@Click寫在里面DIV時把外面的:style="styleObj"移出也有反應(yīng)

@click事件無效？@click.native中.native的含義和使用

記錄@click綁定事件的一個坑

問題描述：

今天開發(fā)的時候，給組件綁定了@click事件，但是事件卻沒有執(zhí)行。

代碼如下：

<template>
<div>
?? ?<span>父組件頁面</span>
?? ? <search @click="onSubmit"></search>
</div>
</template>
<script>
methods: {
?? ?onSubmit() {
?? ??? ?alert('show')
?? ?}
}
</script>

子頁面search.vue

<template>
?? ?<div>
?? ??? ?<button>點擊查找</button>
?? ?</div>
</template>
<script>
</script>

search是我自己封裝的一個組件，問題就出在這兒，search是子組件，想要直接在父組件觸發(fā)click方法。

方案一：不改變子組件頁面的話，父頁面就必須這么寫

<search @click.native="onSubmit"></search>

方案二：

父頁面

<template>
<div>
?? ?<span>父組件頁面</span>
?? ? <search @click="onSubmit"></search>
</div>
</template>
<script>
methods: {
?? ?onSubmit() {
?? ??? ?alert('show')
?? ?}
}
</script>

子頁面search

<template>
?? ?<div>
?? ??? ?<button @click='handleClick'></button>
?? ?</div>
</template>
<script>
methods: {
?? ?handleClick() {
?? ??? ?this.$emit('click')
?? ?}
}
</script>

至于為什么加上.native就可以直接觸發(fā)事件，是因為使用.native之后父級組件可以像處理原生的DOM事件一樣通過 v-on 監(jiān)聽子組件實例的任意事件(@即為v-on:的簡寫)，如果不加natvie，會認為監(jiān)聽的是來自子組件search.vue自定義的事件，然而子組件內(nèi)也沒有使用$emit()來將子組件的觸發(fā)事件拋出，因此onSubmit()方法沒有執(zhí)行。