vue.js中this.$emit怎么使用

本文小編為大家詳細介紹“vue.js中this.$emit怎么使用”，內容詳細，步驟清晰，細節處理妥當，希望這篇“vue.js中this.$emit怎么使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

一、每個 Vue 實例都實現了事件接口

即：

1、使用 $on(eventName) 監聽事件

2、使用 $emit(eventName, optionalPayload) 觸發事件

二、注意事項

 1、父組件可以在使用子組件的地方直接用 v-on 來監聽子組件觸發的事件

 2、不能用 $on 監聽子組件釋放的事件，而必須在模板里直接用 v-on 綁定

三、例子及說明

1、父組件代碼及說明

<template>
  <div>
    <p>{{ total }}</p>
    <my-button4 @increment1="incrementTotal1"></my-button4>     <!--自定義方法increment1監聽子組件觸發情況-->
    <my-button4 @increment2="incrementTotal2"></my-button4>     <!--自定義方法increment2監聽子組件觸發情況-->
  </div>
</template>

<script>
  import myButton4 from './components/myButton4.vue'
  export default{
    data(){
      return{
          total:0
      }
    },
    methods:{
      incrementTotal1: function () {                     /*事件incrementTotal觸發*/
        this.total += 1
      },
      incrementTotal2: function () {                    /*事件incrementTota2觸發*/
        this.total += 2
      }
    },
    components:{                        /*子組件的實例，要盡量放在最后，不然會出現一些不必要的問題*/
      myButton4
    }
  }
</script>

2、子組件代碼及說明

<template>
      <button @click="incrementCounter">{{counter}}</button> <!--在子組件中創建一個按鈕，創建點擊事件-->
</template>

<script>
   export default{
     data(){
       return{
         counter: 0
       }
     },
     methods: {
       incrementCounter: function (){
         this.counter += 1
         this.$emit('increment1')        /*觸發自定義事件increment1，也就是父組件中的incrementTotal1事件*/
         this.$emit('increment2')        /*觸發自定義事件increment2，也就是父組件中的incrementTotal2事件*/
                                         /*這兩個事件一次只會觸發一個，為什么呢？很簡單，因為每次只單擊一個按鈕*/
       }
     }
   }
</script>

3、運行截圖

A、開始截圖：

B、點擊第一個按鈕截圖（+1）

C、點擊第二個按鈕截圖（+2）

 四、總說明

1、首先看子組件件，按鈕中給其綁定了方法：incrementCounter； 

2、點擊button時會執行函數 incrementCounter，increment中有 this.$emit(‘increment1)和this.$emit(‘increment2)，看點擊的是哪個按鈕就執行哪個; 

3、當incrementCounter執行時，就會觸發自定函數increment1（點擊第一個按鈕的時候）或者increment（點擊第二個按鈕的時候），也就是incrementTotal1或者incrementTotal2函數。

讀到這里，這篇“vue.js中this.$emit怎么使用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。