1. 程式人生 > >vue中$on和$emit用法理解

vue中$on和$emit用法理解

很期待奇門遁甲這部電影,誰是老大?伍佰一開口就彷彿回到了挪威的森林、突然的自我時代,哈哈哈,且看我獨孤九劍向天涯……

迴歸正題,在vue中有這樣的一個方法,$on,$emit,就在開發中,我用的比較多的是$emit,對,就是傳遞一個函式方法。用過的人都知道!!

今天在走查專案程式碼的時候,看到旁邊大神用到了一組方法,$on 、 $off、 然後接著$emit 

理解不是特別透,隨即請教了 ,這裡先做筆記,隨後練習

在官方文件中這樣定義,

vm.$on( event, callback )

  • 引數

    • {string | Array<string>} event (陣列只在 2.2.0+ 中支援)
    • {Function} callback
  • 用法

    監聽當前例項上的自定義事件。事件可以由vm.$emit觸發。回撥函式會接收所有傳入事件觸發函式的額外引數。

  • 示例

    vm.$on('test', function (msg) {
      console.log(msg)
    })
    vm.$emit('test', 'hi')
    // => "hi"
是的,一個監聽事件。

事件使用步驟是這樣的,首先建立例項檔案,bus.js,引入vue例項。

然後封裝例項,$on ,這裡面就定義了事件了。關鍵點是使用到了$off。分別對應created,destroyed

在元件中,相同事件的觸發就可以在元件裡面直接呼叫了。感覺很有用。有些東西會重複寫很多,這樣減少了 程式碼量