VUE div click無(wú)效的問(wèn)題及解決
VUE div click無(wú)效
每逢半年 總要遇到一個(gè)前端詭異問(wèn)題,花了個(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寫(xiě)在里面div時(shí) 無(wú)反應(yīng) 寫(xiě)在外面有反應(yīng)
當(dāng)@Click寫(xiě)在里面DIV時(shí) 把外面的:style="styleObj"移出 也有反應(yīng)
@click事件無(wú)效?@click.native中.native的含義和使用
記錄@click綁定事件的一個(gè)坑
問(wèn)題描述:
今天開(kāi)發(fā)的時(shí)候,給組件綁定了@click事件,但是事件卻沒(méi)有執(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è)組件,問(wèn)題就出在這兒,search是子組件,想要直接在父組件觸發(fā)click方法。
方案一:不改變子組件頁(yè)面的話,父頁(yè)面就必須這么寫(xiě)
<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事件一樣通過(guò) v-on 監(jiān)聽(tīng)子組件實(shí)例的任意事件(@即為v-on:的簡(jiǎn)寫(xiě)),如果不加natvie,會(huì)認(rèn)為監(jiān)聽(tīng)的是來(lái)自子組件search.vue自定義的事件,然而子組件內(nèi)也沒(méi)有使用$emit()來(lái)將子組件的觸發(fā)事件拋出,因此onSubmit()方法沒(méi)有執(zhí)行。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于vue使用ant design vue,打包后a-date-picker控件無(wú)法選擇日期的問(wèn)題
這篇文章主要介紹了關(guān)于vite .env.test環(huán)境使用ant design vue,打包后a-date-picker控件無(wú)法選擇日期的問(wèn)題,本文針對(duì)這個(gè)問(wèn)題提供了解決方法,需要的朋友可以參考下2023-04-04離線搭建vue環(huán)境運(yùn)行項(xiàng)目完整步驟
這篇文章主要給大家介紹了關(guān)于離線搭建vue環(huán)境運(yùn)行項(xiàng)目的相關(guān)資料,文中通過(guò)實(shí)例代碼以及圖文介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-06-06vue/cli安裝報(bào)錯(cuò)及解決問(wèn)題的方法圖文詳解
這篇文章主要給大家介紹了關(guān)于vue/cli安裝報(bào)錯(cuò)及解決問(wèn)題的方法,如果在安裝@vue/cli時(shí)遇到錯(cuò)誤,大家可以嘗試以下步驟解決,需要的朋友可以參考下2023-07-07vue請(qǐng)求服務(wù)器數(shù)據(jù)后綁定不上的解決方法
今天小編就為大家分享一篇vue請(qǐng)求服務(wù)器數(shù)據(jù)后綁定不上的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10詳解Vue學(xué)習(xí)筆記進(jìn)階篇之列表過(guò)渡及其他
本篇文章主要介紹了詳解Vue學(xué)習(xí)筆記進(jìn)階篇之列表過(guò)渡及其他,具有一定的參考價(jià)值,有興趣的可以了解一下2017-07-07Vue Axios異步與數(shù)據(jù)類型轉(zhuǎn)換問(wèn)題淺析
總的來(lái)說(shuō)這并不是一道難題,那為什么要拿出這道題介紹?拿出這道題真正想要傳達(dá)的是解題的思路,以及不斷優(yōu)化探尋最優(yōu)解的過(guò)程。希望通過(guò)這道題能給你帶來(lái)一種解題優(yōu)化的思路,Axios是一個(gè)開(kāi)源的可以用在瀏覽器端和Node JS的異步通信框架,主要作用就是實(shí)現(xiàn)AJAX異步通信2023-01-01