快捷導(dǎo)航

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

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

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

關(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)聽(tīng)到 v-on:increment 事件，

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

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

您可能感興趣的文章:

相關(guān)文章

mpvue 單文件頁(yè)面配置詳解
這篇文章主要介紹了mpvue 單文件頁(yè)面配置詳解，本文將介紹如何在 mpvue 官方模板的基礎(chǔ)上，通過(guò)配置 mpvue-config-loader 來(lái)實(shí)現(xiàn)在 vue 文件內(nèi)書(shū)寫(xiě)小程序的頁(yè)面配置，感興趣的小伙伴們可以參考一下
2018-12-12
詳解vue-cli腳手架build目錄中的dev-server.js配置文件
這篇文章主要介紹了詳解vue-cli腳手架build目錄中的dev-server.js配置文件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-11-11
Vue3+Vite+TS實(shí)現(xiàn)二次封裝element-plus業(yè)務(wù)組件sfasga
這篇文章主要介紹了在Vue3+Vite+TS的基礎(chǔ)上實(shí)現(xiàn)二次封裝element-plus業(yè)務(wù)組件sfasga，下面文章也將圍繞實(shí)現(xiàn)二次封裝element-plus業(yè)務(wù)組件sfasga的相關(guān)介紹展開(kāi)相關(guān)內(nèi)容，具有一定的參考價(jià)值，需要的小伙伴可惡意參考一下
2021-12-12
Vue2.x中利用@font-size引入字體圖標(biāo)報(bào)錯(cuò)的解決方法
今天小編就為大家分享一篇Vue2.x中利用@font-size引入字體圖標(biāo)報(bào)錯(cuò)的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
vue-meta實(shí)現(xiàn)router動(dòng)態(tài)設(shè)置meta標(biāo)簽的方法
這篇文章主要介紹了vue-meta實(shí)現(xiàn)router動(dòng)態(tài)設(shè)置meta標(biāo)簽,實(shí)現(xiàn)思路非常簡(jiǎn)單內(nèi)容包括mata標(biāo)簽的特點(diǎn)和mata標(biāo)簽共有兩個(gè)屬性，分別是http-equiv屬性和name屬性，本文通過(guò)實(shí)例代碼給大家詳細(xì)講解需要的朋友可以參考下
2022-11-11
Vue中使用debugger在瀏覽器中不起作用的問(wèn)題及解決
這篇文章主要介紹了Vue中使用debugger在瀏覽器中不起作用的問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-06-06
Vue.js實(shí)現(xiàn)一個(gè)漂亮、靈活、可復(fù)用的提示組件示例
這篇文章主要介紹了Vue.js實(shí)現(xiàn)一個(gè)漂亮、靈活、可復(fù)用的提示組件示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2017-03-03
vue的安裝及element組件的安裝方法
下面小編就為大家分享一篇vue的安裝及element組件的安裝，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
vue和js中實(shí)現(xiàn)模糊查詢方式
這篇文章主要介紹了vue和js中實(shí)現(xiàn)模糊查詢方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。也希望大家多多支持腳本之家
2022-08-08
詳解vue 組件之間使用eventbus傳值
本篇文章主要介紹了vue 組件之間使用eventbus傳值。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-10-10