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代碼，也就是花點時間。積累自己的組件庫希望以后能開發快點。

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

以上是“Vue2.0之如何去掉組件click事件的native修飾”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！