這篇文章將為大家詳細(xì)講解有關(guān)如何實現(xiàn)對vue中v-on綁定自定事件,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。

對官網(wǎng)實例進(jìn)行了一些修改,如下圖:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-on綁定自定義事件</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ total }}</p>
<button-counter v-on:increment="father1"></button-counter>
<button-counter v-on:incr="father2"></button-counter>
<button-counter v-on:inc="father1"></button-counter>
</div>
<script>
Vue.component('button-counter', {
template: '<button v-on:click="child">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
child:function(){
this.counter += 1;
this.$emit('increment');
this.$emit('incr');
this.$emit('inc');
}
}
});
new Vue({
el: '#app',
data: {
total: 0
},
methods: {
father1: function () {
this.total += 1
},
father2: function () {
this.total -= 1
}
}
})
</script>
</body>
</html>
點擊第一個按鈕瀏覽器的執(zhí)行順序如圖所示:
步驟一:點擊第一個按鈕,執(zhí)行子組件的函數(shù)child
步驟二:分別觸發(fā)該按鈕中的事件$emit(‘ ');
步驟三:監(jiān)聽到 v-on:increment 事件,
步驟四:執(zhí)行父組件監(jiān)聽子組件的事件father1;
關(guān)于“如何實現(xiàn)對vue中v-on綁定自定事件”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
網(wǎng)頁題目:如何實現(xiàn)對vue中v-on綁定自定事件-創(chuàng)新互聯(lián)
網(wǎng)站路徑:http://chinadenli.net/article26/hhejg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App設(shè)計、商城網(wǎng)站、建站公司、動態(tài)網(wǎng)站、網(wǎng)站策劃、網(wǎng)站設(shè)計公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容