對vue中v-on綁定自定事件的實例講解

更新時間：2018年09月06日 09:45:53 作者：有一個王小森

今天小編就為大家分享一篇對vue中v-on綁定自定事件的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

關(guān)于官網(wǎng)vue中v-on綁定自定義事件的個人理解

對官網(wǎng)實例進行了一些修改，如下圖：

<!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；

以上這篇對vue中v-on綁定自定事件的實例講解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue中子組件向父組件傳值以及.sync修飾符詳析
.sync?修飾符所提供的功能,當(dāng)一個子組件改變了一個prop的值時,這個變化也會同步到父組件中所綁定,下面這篇文章主要給大家介紹了關(guān)于Vue中子組件向父組件傳值以及.sync修飾符的相關(guān)資料,需要的朋友可以參考下
2022-11-11
webpack dev-server代理websocket問題
這篇文章主要介紹了webpack dev-server代理websocket問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-08-08
Ant Design Vue如何生成動態(tài)菜單a-menu
這篇文章主要介紹了Ant Design Vue如何生成動態(tài)菜單a-menu問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-01-01
詳解解決使用axios發(fā)送json后臺接收不到的問題
這篇文章主要介紹了詳解解決使用axios發(fā)送json后臺接收不到的問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-06-06
el-table渲染慢卡頓問題最優(yōu)解決方案
本文主要介紹了el-table渲染慢卡頓問題最優(yōu)解決方案，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
Vue?調(diào)用攝像頭掃描條碼功能實現(xiàn)代碼
本文介紹了如何使用Vue.js和jsQR庫來實現(xiàn)調(diào)用攝像頭并掃描條碼的功能,通過安裝依賴、獲取攝像頭視頻流、解析條碼等步驟,實現(xiàn)了從開始掃描到停止掃描的完整流程,同時,還強調(diào)了瀏覽器兼容性、HTTPS環(huán)境、權(quán)限問題和性能優(yōu)化的重要性,感興趣的朋友一起看看吧
2025-03-03
react里組件通信的幾種方式小結(jié)
本文主要介紹了react里組件通信的幾種方式小結(jié),包含了5種方式,主要是props傳遞,回調(diào)函數(shù)作為props,Context,Redux或MobX,refs,具有一定的參考價值,感興趣的可以了解一下
2024-06-06
atom-design(Vue.js移動端組件庫)手勢組件使用教程
這篇文章主要介紹了atom-design(Vue.js移動端組件庫)手勢組件使用教程,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-05-05
el-input設(shè)置后綴顯示單位并阻止?jié)L輪微調(diào)的解決方法
在Element UI或Element Plus中,使用el-input組件時,可以通過suffix插槽添加單位顯示,如果設(shè)置了type為'number',滾輪滾動可能會導(dǎo)致數(shù)值微調(diào),解決方法是阻止?jié)L輪事件的默認行為,并用CSS隱藏掉輸入框的上下箭頭,確保數(shù)值輸入的準(zhǔn)確性,這樣既美觀又提升了用戶體驗
2024-09-09
探索Vue如何高效構(gòu)建可復(fù)用組件
Vue.js作為現(xiàn)代前端開發(fā)中的佼佼者,其組件系統(tǒng)是構(gòu)建高效、靈活和可擴展用戶界面的關(guān)鍵,本文帶大家深度探索?Vue.js?組件的核心奧義,感興趣的小伙伴可以了解下
2024-12-12