Vue中@click.stop與@click.prevent、@click.native使用
更新時間：2024年08月16日 17:18:52 作者：迷惑的Jack
這篇文章主要介紹了Vue中@click.stop與@click.prevent、@click.native使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
@click.stop與@click.prevent、@click.native使用
在組件中時常看到@click.native。
在項目中遇到后，簡單介紹下：
@click.native是給組件綁定原生事件
我的標簽 ‘ListCell’ 是子組件引到當前父組件
因為當父組件中引入子組件的時候，當要觸發(fā)子組件點擊事件的時候@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事件，此時，我想點擊子元素獲取子元素的點擊事件，但卻觸發(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：阻止事件的默認行為，
例如：
在代碼里寫入一個a標簽，點擊會跳轉到目標鏈接網頁中：
<view class="example-body"> <a rel="external nofollow" >百度</a> </view>
但如果我們不想讓它跳轉但還想使用a標簽的話，此時就需要使用@click.prevent方法：
這時再點擊a標簽的時候就不會跳轉目標地址鏈接了。
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue+vue-meta-info動態(tài)設置meta標簽教程
這篇文章主要介紹了vue+vue-meta-info動態(tài)設置meta標簽教程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue實現(xiàn)顯示消息提示框功能,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要為大家詳細介紹了Vue下拉菜單組件化開發(fā)過程，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家詳細介紹了在Vue3組合式API中如何優(yōu)化列表渲染性能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-12-12
基于vue與element實現(xiàn)創(chuàng)建試卷相關功能(實例代碼)
這篇文章主要介紹了基于vue與element實現(xiàn)創(chuàng)建試卷相關功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-12
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單瀑布流布局，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
解決iview多表頭動態(tài)更改列元素發(fā)生的錯誤的方法
這篇文章主要介紹了解決iview多表頭動態(tài)更改列元素發(fā)生的錯誤的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要為大家介紹了網絡請求方案原生網絡請求和js網絡請求庫的過程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步2021-11-11
在現(xiàn)代Web開發(fā)中,與后端API的交互是不可避免的,然而,網絡請求是不穩(wěn)定的,可能會因為各種原因失敗,因此,優(yōu)雅地處理API請求失敗的情況是提升用戶體驗和應用穩(wěn)定性的關鍵,本文將詳細介紹在Vue.js中處理API請求失敗的最佳實踐和策略,需要的朋友可以參考下2024-12-12
vue3.0 的 Composition API 的使用示例
這篇文章主要介紹了vue3.0 的 Composition API 的使用示例，幫助大家更好的理解和學習vue，感興趣的朋友可以了解下2020-10-10