記得2008 11月初的一天

歲末年終這兩天
跟家人一起到果園
說好一早 老爸要帶我們去 走走山邊的道路
還沒五點 天還沒亮
就已醒來 醒著 想著
2008 11月初的一天

坐著高鐵 從台北下來 換了火車
再搭著客運 下車在老滕林的農場
往山裡的方向 走去
筆直的道路 是通往家的方向

晚上在果園 走在林道上
只能透過月光 看著前方依稀道路的方向
沒記錯的話 草叢裡點點的亮光 應該是螢火蟲

天微微亮 時間應該只是五點多的清晨
敲敲木門 我爸已經起來等著
穿上長袖 在還昏暗的天色中 往山的方向 走去
快亮的天空 是混了黑夜的藍色
走在山路上 忘記了 一路上 只是走著
隨著 天亮了起來
也走到了山上 看到了如雲海般的景觀

那個時刻 沒有留下文字 沒有留下照片
這一天卻永遠 烙印在我心裡最深的角落

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