快捷導(dǎo)航

對(duì)vue中v-on綁定自定事件的實(shí)例講解

更新時(shí)間：2018年09月06日 09:45:53 作者：有一個(gè)王小森

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

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

對(duì)官網(wǎng)實(shí)例進(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>

點(diǎn)擊第一個(gè)按鈕瀏覽器的執(zhí)行順序如圖所示：

步驟一：點(diǎn)擊第一個(gè)按鈕，執(zhí)行子組件的函數(shù)child

步驟二：分別觸發(fā)該按鈕中的事件$emit(‘ ')；

步驟三：監(jiān)聽到 v-on:increment 事件，

步驟四：執(zhí)行父組件監(jiān)聽子組件的事件father1；

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

您可能感興趣的文章:

相關(guān)文章

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