元件的自定義事件

1. 一種元件間通訊的方式，適用於：子元件 ===> 父元件

2. 使用場景：A是父元件，B是子元件，B想給A傳資料，那麼就要在A中給B繫結自定義事件（事件的回撥在A中）。

3. 繫結自定義事件：

   1. 第一種方式，在父元件中：<Demo @atguigu="test"/>或<Demo v-on:atguigu="test"/>

   2. 第二種方式，在父元件中：

      <Demo ref="demo"/>
      ......
      mounted(){
         this.$refs.xxx.$on('atguigu',this.test)
      }
      

   3. 若想讓自定義事件只能觸發一次，可以使用once

      修飾符，或$once方法。

      this.$refs.student.$on('atguigu',this.getStudentName) //繫結自定義事件
      // this.$refs.student.$once('atguigu',this.getStudentName) //繫結自定義事件（一次性）
      

4. 觸發自定義事件：this.$emit('atguigu',資料)

5. 解綁自定義事件this.$off('atguigu')

6. 元件上也可以繫結原生DOM事件，需要使用native修飾符。

   <!-- 通過父元件給子元件繫結一個自定義事件實現：子給父傳遞資料（第二種寫法，使用ref） -->
   ......
   <Student ref="student" @click.native="show"/>
    
   

7. 注意：通過this.$refs.xxx.$on('atguigu',回撥)繫結自定義事件時，回撥要麼配置在methods中，要麼用箭頭函式，否則this指向會出問題！