Vue中@click.stop與@click.prevent、@click.native使用
@click.stop與@click.prevent、@click.native使用
在組件中時?？吹紷click.native。
在項(xiàng)目中遇到后，簡單介紹下：
@click.native是給組件綁定原生事件
我的標(biāo)簽 ‘ListCell’ 是子組件引到當(dāng)前父組件
因?yàn)楫?dāng)父組件中引入子組件的時候，當(dāng)要觸發(fā)子組件點(diǎn)擊事件的時候@click 不生效。
有兩種解決方式
1.@click.native
2.在子組件中添加this.$emit ( “事件名” ，value )方法 將子組件的值傳到父組件。
<div id="app">
<div v-on:click="dodo">
<button v-on:click="doThis">阻止單擊事件繼續(xù)傳播</button>
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
name: "Vue.js"
},
methods: {
doThis: function () {
alert("dothis");
},
dodo: function () {
alert("dodo");
}
}
});
</script>這樣的話，會先彈出dothis 在彈出dodo,
如果用@click.stop的話
<div id="app">
<div v-on:click="dodo">
<button v-on:click.stop="doThis">阻止單擊事件繼續(xù)傳播</button>
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
name: "Vue.js"
},
methods: {
doThis: function () {
alert("dothis");
},
dodo: function () {
alert("dodo");
}
}
});
</script>這樣的話，只會彈出dothis
@click.stop
問題：
父元素中添加了一個click事件，其下面的子元素中也添加了click事件，此時，我想點(diǎn)擊子元素獲取子元素的點(diǎn)擊事件，但卻觸發(fā)的是父元素的事件：
<view class=“footer-box” @click=“clickCard”> <view @click=“footerClick(‘喜歡')”> 喜歡 <view @click=“footerClick(‘評論')”> 評論 <view @click=“footerClick(‘分享')”> 分享
此時，我們就需要使用@click.stop：阻止事件冒泡方法來解決這個問題：
<view class="footer-box" @click="clickCard">
<view @click.stop="footerClick('喜歡')"><text class="footer-box__item">喜歡</text></view>
<view @click.stop="footerClick('評論')"><text class="footer-box__item">評論</text></view>
<view @click.stop="footerClick('分享')"><text class="footer-box__item">分享</text></view>
</view>@click.prevent
還有一個與之相似的方法：
@click.prevent：阻止事件的默認(rèn)行為，
例如：
在代碼里寫入一個a標(biāo)簽，點(diǎn)擊會跳轉(zhuǎn)到目標(biāo)鏈接網(wǎng)頁中：
<view class="example-body"> <a rel="external nofollow" >百度</a> </view>
但如果我們不想讓它跳轉(zhuǎn)但還想使用a標(biāo)簽的話，此時就需要使用@click.prevent方法：
這時再點(diǎn)擊a標(biāo)簽的時候就不會跳轉(zhuǎn)目標(biāo)地址鏈接了。
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue+vue-meta-info動態(tài)設(shè)置meta標(biāo)簽教程
這篇文章主要介紹了vue+vue-meta-info動態(tài)設(shè)置meta標(biāo)簽教程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue實(shí)現(xiàn)顯示消息提示框功能,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要為大家詳細(xì)介紹了Vue下拉菜單組件化開發(fā)過程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家詳細(xì)介紹了在Vue3組合式API中如何優(yōu)化列表渲染性能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-12-12
基于vue與element實(shí)現(xiàn)創(chuàng)建試卷相關(guān)功能(實(shí)例代碼)
這篇文章主要介紹了基于vue與element實(shí)現(xiàn)創(chuàng)建試卷相關(guān)功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-12
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡單瀑布流布局，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
解決iview多表頭動態(tài)更改列元素發(fā)生的錯誤的方法
這篇文章主要介紹了解決iview多表頭動態(tài)更改列元素發(fā)生的錯誤的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
vue網(wǎng)絡(luò)請求方案原生網(wǎng)絡(luò)請求和js網(wǎng)絡(luò)請求庫
這篇文章主要為大家介紹了網(wǎng)絡(luò)請求方案原生網(wǎng)絡(luò)請求和js網(wǎng)絡(luò)請求庫的過程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步2021-11-11
在現(xiàn)代Web開發(fā)中,與后端API的交互是不可避免的,然而,網(wǎng)絡(luò)請求是不穩(wěn)定的,可能會因?yàn)楦鞣N原因失敗,因此,優(yōu)雅地處理API請求失敗的情況是提升用戶體驗(yàn)和應(yīng)用穩(wěn)定性的關(guān)鍵,本文將詳細(xì)介紹在Vue.js中處理API請求失敗的最佳實(shí)踐和策略,需要的朋友可以參考下2024-12-12
vue3.0 的 Composition API 的使用示例
這篇文章主要介紹了vue3.0 的 Composition API 的使用示例，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-10-10