詳解Vue2.0之去掉組件click事件的native修飾
更新時間：2017年04月20日 09:30:56 作者：烈風裘
這篇文章主要介紹了詳解Vue2.0之去掉組件click事件的native修飾,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
這個是在組件開發(fā)中遇到的問題，當時我在編寫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官方文檔關于父子組件通訊的原則，父組件通過prop傳遞數(shù)據(jù)給子組件，子組件觸發(fā)事件給父組件。但父組件想在子組件上監(jiān)聽自己的click的話，需要加上native修飾符，故寫法就像上面這樣。
好吧，處女座的毛病又來了。像button這樣常用的組件如果加上native的話是感覺很突兀的。雖然組件設計有自身的考慮，因此我想將click的native去掉，思路如下：
- 子組件監(jiān)聽父組件給的click事件，
- 子組件內部處理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源碼，一邊將思路總結寫成Vue代碼，也就是花點時間。積累自己的組件庫希望以后能開發(fā)快點。
現(xiàn)在項目地址在這里，前期以實現(xiàn)功能為主，不建議用在生產(chǎn)環(huán)境，讀讀代碼實現(xiàn)思路就好，中文備注都做好了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue2和Vue3的10種組件通信方式梳理，本文將通過選項式API?組合式API以及setup三種不同實現(xiàn)方式全面介紹Vue2和Vue3的組件通信方式，需要的朋友可以參考一下2022-08-08
vue通過v-html指令渲染的富文本無法修改樣式的解決方案
這篇文章主要介紹了vue通過v-html指令渲染的富文本無法修改樣式的解決方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
這篇文章主要為大家介紹了Pinia.js狀態(tài)管理器上手使用指南，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
vue-extend和vue-component注冊一個全局組件方式
這篇文章主要介紹了vue-extend和vue-component注冊一個全局組件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要給大家介紹了關于vue使用keep-alive后清除緩存的相關資料,這個問題在我們日常工作中經(jīng)常會用到,本文通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了vux-uploader 圖片上傳組件的安裝及使用方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-05-05
mpvue 是美團開源的一套語法與vue.js一致的、快速開發(fā)小程序的前端框架，這篇文章主要介紹了基于mpvue的小程序項目搭建的步驟，非常具有實用價值，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了vue異步加載dom元素之后無法獲得的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了vue3?使用setup語法糖實現(xiàn)分類管理,本次模塊使用 vue3+element-plus 實現(xiàn)一個新聞站的后臺分類管理模塊，其中新增、編輯采用對話框方式公用一個表單，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Vue3.0在組件外使用VueI18n的情況，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04