Vue2.0之去掉組件click事件的native修飾

Vue2.0之去掉組件click事件的native修飾

這個是在組件開發中遇到的問題，當時我在編寫button的組件，模板是這樣的：

<template>
  <button class="disable-hover button ion-button"
          :class="[modeClass,typeClass,shapeClass,sizeClass,colorClass,roleClass,strongClass]">
    <span class="button-inner">
      <slot></slot>
    </span>
    <div class="button-effect"></div>
  </button>
</template>

使用是這樣子的：

<ion-button @click.native="primary()" color="primary">primary</ion-button>

根據Vue2.0官方文檔關於父子組件通訊的原則，父組件通過prop傳遞數據給子組件，子組件觸發事件給父組件。但父組件想在子組件上監聽自己的click的話，需要加上native修飾符，故寫法就像上面這樣。

好吧，處女座的毛病又來了。像button這樣常用的組件如果加上native的話是感覺很突兀的。雖然組件設計有自身的考慮，因此我想將click的native去掉，思路如下：

1. 子組件監聽父組件給的click事件，
2. 子組件內部處理click事件然後向外發送click事件：$emit("click".fn)

改造後的代碼如下(親測可用)：

<template>
  <button class="disable-hover button ion-button" @click="_click"
          :class="[modeClass,typeClass,shapeClass,sizeClass,colorClass,roleClass,strongClass]">
    <span class="button-inner">
      <slot></slot>
    </span>
    <div class="button-effect"></div>
  </button>
</template>

<script type="text/babel">
export default{
    ....
    ....
    methods: {
      _click: function () {
        this.$emit('click', function () {
          alert('inner')
        })
      }
    }
}
</script>

父組件中這樣使用：

<ion-button @click="primary()" color="primary">primary</ion-button>

也許讀者能看出來，我正在參照IONIC2.X的組件API寫Vue2.0的功能組件，目前只完成了：ActionSheet、Button、Icon、Alert、Toast這幾個，一邊看IONIC源碼，一邊將思路總結寫成Vue代碼，也就是花點時間。積累自己的組件庫希望以後能開發快點。

現在項目地址在這裏，前期以實現功能爲主，不建議用在生產環境，讀讀代碼實現思路就好，中文備註都做好了。

以上內容的最新版請查看我的博客，點這裏。

(完)