欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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í)行。

總結(jié)

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue輸入框組件開發(fā)過程詳解

    vue輸入框組件開發(fā)過程詳解

    這篇文章主要為大家詳細介紹了vue輸入框組件開發(fā)過程,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • VUEX-action可以修改state嗎

    VUEX-action可以修改state嗎

    這篇文章主要介紹了VUEX-action可以修改state嗎,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-11-11
  • 關(guān)于vue使用ant design vue,打包后a-date-picker控件無法選擇日期的問題

    關(guān)于vue使用ant design vue,打包后a-date-picker控件無法選擇日期的問題

    這篇文章主要介紹了關(guān)于vite .env.test環(huán)境使用ant design vue,打包后a-date-picker控件無法選擇日期的問題,本文針對這個問題提供了解決方法,需要的朋友可以參考下
    2023-04-04
  • 離線搭建vue環(huán)境運行項目完整步驟

    離線搭建vue環(huán)境運行項目完整步驟

    這篇文章主要給大家介紹了關(guān)于離線搭建vue環(huán)境運行項目的相關(guān)資料,文中通過實例代碼以及圖文介紹的非常詳細,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友可以參考下
    2023-06-06
  • vue?3.0?vue.config.js文件常用配置方式

    vue?3.0?vue.config.js文件常用配置方式

    這篇文章主要介紹了vue?3.0?vue.config.js文件常用配置方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-03-03
  • vue/cli安裝報錯及解決問題的方法圖文詳解

    vue/cli安裝報錯及解決問題的方法圖文詳解

    這篇文章主要給大家介紹了關(guān)于vue/cli安裝報錯及解決問題的方法,如果在安裝@vue/cli時遇到錯誤,大家可以嘗試以下步驟解決,需要的朋友可以參考下
    2023-07-07
  • vue彈窗組件的實現(xiàn)示例代碼

    vue彈窗組件的實現(xiàn)示例代碼

    這篇文章主要介紹了vue彈窗組件的實現(xiàn)示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • vue請求服務(wù)器數(shù)據(jù)后綁定不上的解決方法

    vue請求服務(wù)器數(shù)據(jù)后綁定不上的解決方法

    今天小編就為大家分享一篇vue請求服務(wù)器數(shù)據(jù)后綁定不上的解決方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-10-10
  • 詳解Vue學習筆記進階篇之列表過渡及其他

    詳解Vue學習筆記進階篇之列表過渡及其他

    本篇文章主要介紹了詳解Vue學習筆記進階篇之列表過渡及其他,具有一定的參考價值,有興趣的可以了解一下
    2017-07-07
  • Vue Axios異步與數(shù)據(jù)類型轉(zhuǎn)換問題淺析

    Vue Axios異步與數(shù)據(jù)類型轉(zhuǎn)換問題淺析

    總的來說這并不是一道難題,那為什么要拿出這道題介紹?拿出這道題真正想要傳達的是解題的思路,以及不斷優(yōu)化探尋最優(yōu)解的過程。希望通過這道題能給你帶來一種解題優(yōu)化的思路,Axios是一個開源的可以用在瀏覽器端和Node JS的異步通信框架,主要作用就是實現(xiàn)AJAX異步通信
    2023-01-01

最新評論