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標簽，點擊會跳轉(zhuǎn)到目標鏈接網(wǎng)頁中：
<view class="example-body"> <a rel="external nofollow" >百度</a> </view>
但如果我們不想讓它跳轉(zhuǎn)但還想使用a標簽的話，此時就需要使用@click.prevent方法：
這時再點擊a標簽的時候就不會跳轉(zhuǎn)目標地址鏈接了。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于Vue-extend和VueComponent問題小結(jié)
這篇文章主要介紹了Vue-extend和VueComponent問題,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue使用WebSocket模擬實現(xiàn)聊天功能,通過創(chuàng)建node服務(wù)和server.js文件實例代碼相結(jié)合給大家介紹的非常詳細，需要的朋友可以參考下2021-08-08
本篇文章主要介紹了淺談Vue下使用百度地圖的簡易方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue 清空input標簽 中file的值操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue中transition單個節(jié)點過渡與transition-group列表過渡全過程
這篇文章主要介紹了Vue中transition單個節(jié)點過渡與transition-group列表過渡全過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vant是一個專為移動端設(shè)計的輕量級組件庫,自2017年開源以來,提供了Vue2、Vue3及多平臺版本支持,安裝Vant時需要注意版本兼容問題,Vue3項目應(yīng)安裝最新版Vant3,而Vue2項目則需安裝Vant2,安裝錯誤時,需卸載后重新安裝正確版本2024-10-10
Vue使用v-for數(shù)據(jù)渲染順序混亂的原因及解決方案
在 Vue.js 中,使用 v-for 指令進行數(shù)據(jù)渲染時,有時會遇到渲染順序混亂的問題,這種問題主要與 Vue 的響應(yīng)式系統(tǒng)、DOM 更新機制以及數(shù)組的變更方法有關(guān),以下是對這一現(xiàn)象的深入分析及解決方案,需要的朋友可以參考下2025-01-01
這篇文章主要給大家介紹了利用Vue.js仿微信過渡動畫左右切換效果的相關(guān)資料，需要用到的技術(shù)棧是Vue+Vuex。文中通過示例代碼介紹的非常詳細，對大家具一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-06-06
這篇文章主要介紹了vue倉庫的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-09-09
vue3?process.env.XXX環(huán)境變量不生效的解決方法
這篇文章主要給大家介紹了關(guān)于vue3?process.env.XXX環(huán)境變量不生效的解決方法,通過文中介紹的方法可以很方便的解決遇到的問題,對大家學(xué)習(xí)或者使用vue3具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08