詳解Vue2.0之去掉組件click事件的native修飾，vue2.0native

詳解Vue2.0之去掉組件click事件的native修飾，vue2.0native

這個是在組件開發中遇到的問題，當時我在編寫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代碼，也就是花點時間。積累自己的組件庫希望以後能開發快點。

現在項目地址在這裡，前期以實現功能為主，不建議用在生產環境，讀讀代碼實現思路就好，中文備忘都做好了。
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。