vue自訂元件 自訂event

在vue裡自訂元件 除了最常用的props使用
也會需要自訂event 以如同@click般的使用
這部分 只要在元件內使用$emit(event-name)發送
就可以在使用元件時透過 @evnet-name來觸發handler

例 自訂子元件my-component
透過emit發送事件,並同時發送data1,data2資料
this.$emit('event-name',data1,data2)
下是三種可能的使用方式

子元件發送
this.$emit('event-name',data1,data2)

父元件接收方式
1.handler取得發送event時所帶的資料
  若只是設定myHandler 
  取得data1,data2 是來自$emit送出之參數
  <my-component @event-name="myHandler">
  myHandler(data1,data2) {}
  
2.handler取得使用者自帶的資料
  設定handler時為執行myHandler(data1,data2) 
  取得data1,data2 是來自使用時所傳遞之參數
  <my-component @event-name="myHandler(data1,data2)">
  myHandler(data1,data2) {}
  
3.handler取得event帶過來的資料,並帶使用者自訂資料
  event所帶的資料透過$event取得
  <my-component @event-name="myHandler($event,data1,data2)">
  myHandler(evt,data1,data2) {}
  拿到到evt是event帶來的資料,data1,data2是使用者帶的資料

子元件如何判斷是否被使用時設定了event handler
會需要依照 元件被使用時,是否有設定了eventHandler來做後續處理
可透過this.$listeners.[事件名稱]來確認

my-component子元件
this.emit('beforeClick')
this.emit('afterClick)
computed:{
  hasBeforeListener() {
    return this.$listeners && this.$listeners.beforeClick !== undefined
  },
  hasAfterListener() {
    return this.$listeners && this.$listeners.afterClick !== undefined
  }
}
這時候就會
this.hasBeforeListener的結果會是true
this.hasAfterListener的結果會是false