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