元件的自定義事件

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

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

3.繫結自定義事件:
1.第一種方式，在父元件中:<Demo @su="test"/>或<Demo v-on:su="test"/>
2.第二種方式，在父元件中:

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

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

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

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

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

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

全域性事件匯流排(GlobalEventBus)

• 一種元件間通訊的方式，適用於任意元件間通訊。

• 安裝全域性事件匯流排：

//main.js
new Vue({
......
beforeCreate() {
Vue.prototype.$bus = this //安裝全域性事件匯流排，$bus就是當前應用的vm
}，
......
})
 

• 使用事件匯流排:
  • 接收資料：A元件想接收資料，則在A元件中給$bus繫結自定義事件，事件的回撥留在A元件自身。

methods(){
demo(data){......}
}
......
mounted( ) {
this.$bus.$on('xxxx',this.demo)
}

提供資料：this.$bus.$emit( 'xxxx',資料)

• 最好在beforeDestroy鉤子中，用$off去解綁當前元件所用到的事件。

訊息訂閱與釋出(pubsub)

• 一種元件間通訊的方式，適用於任意元件間通訊。

• 使用步驟：

  • 安裝pubsub: npm i pubsub-js

  • 引入: import pubsub from 'pubsub-js'

  • 接收資料：A元件想接收資料，則在A元件中訂閱訊息，訂閱的回撥留在A元件自身。

  • methods(){
    demo(data){......}
    }
    ......
    mounted() {
    this.pid = pubsub.subscribe( 'xxx ' ,this.demo)//訂閱訊息
    }
    

  • 提供資料:pubsub.publish( 'xxx ',資料)

  • 最好在beforeDestroy鉤子中，用PubSub.unsubscribe(pid)去取消訂閱

nextTick

• 語法：this.$nextTick(回撥函式)
• 作用：在下一次DOM更新結束後執行其指定的回撥。
• 什麼時候用：當改變資料後，要基於更新後的新DOM進行某些操作時，要在nextTick所指定的回撥函式中執行。