詳解Vue2.0之去掉組件click事件的native修飾
這個是在組件開發(fā)中遇到的問題，當(dāng)時我在編寫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>
根據(jù)Vue2.0官方文檔關(guān)于父子組件通訊的原則，父組件通過prop傳遞數(shù)據(jù)給子組件，子組件觸發(fā)事件給父組件。但父組件想在子組件上監(jiān)聽自己的click的話，需要加上native修飾符，故寫法就像上面這樣。
好吧，處女座的毛病又來了。像button這樣常用的組件如果加上native的話是感覺很突兀的。雖然組件設(shè)計有自身的考慮，因此我想將click的native去掉，思路如下：
- 子組件監(jiān)聽父組件給的click事件，
- 子組件內(nèi)部處理click事件然后向外發(fā)送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源碼，一邊將思路總結(jié)寫成Vue代碼，也就是花點(diǎn)時間。積累自己的組件庫希望以后能開發(fā)快點(diǎn)。
現(xiàn)在項目地址在這里，前期以實現(xiàn)功能為主，不建議用在生產(chǎn)環(huán)境，讀讀代碼實現(xiàn)思路就好，中文備注都做好了。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue中 v-if/v-show/插值表達(dá)式導(dǎo)致閃現(xiàn)的原因及解決辦法
在開發(fā)過程中經(jīng)常會發(fā)現(xiàn)當(dāng)頁面明明不應(yīng)該出現(xiàn)的元素或內(nèi)容會閃現(xiàn)一下然后消失，這篇文章給大家分享Vue中 v-if/v-show/插值表達(dá)式導(dǎo)致閃現(xiàn)的原因及解決辦法，一起看看吧2018-10-10
vue 實現(xiàn)數(shù)字滾動增加效果的實例代碼
最近做了個項目需要做數(shù)字滾動增加的效果，剛開始接到這個項目還真是懵了，后來發(fā)現(xiàn)實現(xiàn)代碼很簡單的，下面小編給大家?guī)砹藇ue 實現(xiàn)數(shù)字滾動增加效果的實例代碼，需要的朋友參考下吧2018-07-07
詳解vue2.0 不同屏幕適配及px與rem轉(zhuǎn)換問題
這篇文章主要介紹了詳解vue2.0 不同屏幕適配及px與rem轉(zhuǎn)換問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
今天小編就為大家分享一篇vue輸入節(jié)流,避免實時請求接口的實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
詳解element-ui 組件el-autocomplete使用踩坑記錄
最近使用了el-autocomplete組件，本文主要介紹了element-ui 組件el-autocomplete使用踩坑記錄，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了學(xué)習(xí) Vue.js 遇到的那些坑，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-02-02
在項目中很多時候需要用到vue打包成html不需要放在服務(wù)器上就能瀏覽,根據(jù)官網(wǎng)打包出來的html直接打開是顯示空白,下面這篇文章主要給大家介紹了關(guān)于vue打包后出現(xiàn)空白頁的原因及解決方式的相關(guān)資料,需要的朋友可以參考下2022-07-07
vue+elementUI顯示表格指定列合計數(shù)據(jù)方式
這篇文章主要介紹了vue+elementUI顯示表格指定列合計數(shù)據(jù)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
本文主要介紹了vue3中使用jsx的實現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。接下來通過本文給大家分享Vue.js下載方式及基本概念，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05