快捷導(dǎo)航

vue組件中添加@click失效問題及解決

更新時間：2024年08月16日 15:19:58 作者：小何同學(xué)－

這篇文章主要介紹了vue組件中添加@click失效問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue組件中添加@click失效

遇到了一個非常蠢的bug，在vue組件中添加click事件無效，@click.native也無效

想添加一個click事件來切換歌曲

<div class="playlist">
<div class="playItem" v-for="(item,i) in playlist.tracks" :key="item.id"  @click="setPlayIndex(i)"></div>
</div>

結(jié)果click事件一直無效，試了@click.native也無效，總之很多網(wǎng)上別的方法都試過了都不行...

查看事件監(jiān)聽器也有click，但是是怎么回事呢？

原來是！

我之前在歌單組件playlist里面寫了個z-index:-1;

 .playlist{
      width: 7.5rem;
      padding: 0 0.4rem;
      background: linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,1));
      position: relative;
      top: -0.5rem;
      border-top-right-radius: 1rem;
      border-top-left-radius: 1rem;
      z-index:-1;
}

然后其實(shí)一直點(diǎn)擊不到而已！

刪掉就好了。

@click失效？@click.native

問題描述

練習(xí)uniapp開發(fā)的時候，封裝好了一個組件，但是給組件綁定了@click事件后，事件卻沒有執(zhí)行。

主要代碼如下

<div class="row" v-for="item in newsArr" :key="item.id">
	<newsbox :item="item" @click="goDetail(item)"></newsbox>
</div>


//跳轉(zhuǎn)到詳情頁
goDetail(item){				
	uni.navigateTo({
		url:`/pages/detail/detail?cid=${item.classid}&id=${item.id}`
				})
},

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

這時候需要在@click.native就可以解決了，可是為什么呢

官網(wǎng)的解釋

你可能想在某個組件的根元素上監(jiān)聽一個原生事件?？梢允褂?v-on 的修飾符 .native 。

通俗點(diǎn)講

就是在父組件中給子組件綁定一個原生的事件，就將子組件變成了普通的HTML標(biāo)簽，不加’. native’事件是無法觸發(fā)的。

可以理解為該修飾符的作用就是把一個vue組件轉(zhuǎn)化為一個普通的HTML標(biāo)簽，并且該修飾符對普通HTML標(biāo)簽是沒有任何作用的。

更細(xì)一點(diǎn)來講

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

這里也引出了對綁定@click無效有兩種解決方法