iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 16
2
Modern Web

忍住不打牌位,只要30天VueJS帶你上A牌系列 第 16

Day16 資源回收再利用-可複用性 Mixins

我們在 Vue 專案時常會想把共用或是常用的可抽象層抽出來寫,一般有三種方式:

1.Component
2.Mixin
3.Prototype

我們常會依功能做成獨立元件,再來重複使用元件,讓我們回想一下前幾天鐵人發文介紹的,元件可以 bind 入一些 props,也可以 $emit 傳出事件,在父層使用 v-slot 改寫模板,傳入元件安插好的插槽,讓元件靈活運用,你想用一百次都不是問題。

元件的使用在我之前文章有介紹過了,然而我們很常需要在函數、數據上重複呼叫再利用,這時候 Mixin、Prototype 就現身了。

首先,我們先來介紹Mixin,混入的部分有分全域的混入,與局部的混入,使用時機端看是否會全局的複用,如errorHandle、toastMessage、loadingMask,或是在局部元件複用而已。

全域混入

import Vue from 'vue'
Vue.mixin({
  methods: { 
      someReuseFunction () {
          //..
      }
  }
})

或者

import Vue from 'vue'
import GlobalMixin from './XXX'
Vue.mixin(GlobalMixin)
// define your single file mixins: GlobalMixin.vue

局部混入

import LocalMixin from './XXX'
export default {
  mixins: [ LocalMixin ]
  // code..
}
// define your single file mixins: LocalMixin.vue

當我們在使用混入的時候須注意到幾點:

1.同名的生命週期鉤子,混入與元件都將被調用,混入對象的鉤子會在元件之前調用。
2.data在元件與混入之間發生衝突時,會以元件的data為優先。
3.若是像Methods、Components 或 Directives名稱衝突時,合併策略會以元件對象為優先。
P.S:Vue.extend()也使用同樣的策略進行合併。
我們也可以自訂義合併策略

所以全局的混入在使用上就要格外的謹慎小心啊,命名規則我習慣帶入混入的namespace當作前綴,如:commomMixin_errorHandle(),甚至於混入的私有函數命名,則應該加上$_當作前綴,如:$_myGreatMixin_update()

有任何問題歡迎下方留言,如果喜歡我的文章別忘了按讚、訂閱追蹤加分享唷!!
---我是分隔線-----------------------------------------------------------
PollyPO技術-前端設計轉前端工程師-JS踩坑雜記 30 天
喬依司-實作經典 JavaScript 30
五百億-Vue CLI + Firebase 雲端資料庫 30天打造簡易部落格及後臺管理
eien_zheng-前端小嘍嘍的Golang學習旅程_The journey of learning Golang


上一篇
Day15 指令大全 v-show、v-html、v-text、v-pre、v-cloak、v-once
下一篇
Day 17 全世界都是我的伸展台-Vue Extend
系列文
忍住不打牌位,只要30天VueJS帶你上A牌30

1 則留言

0
五百億
iT邦新手 5 級 ‧ 2020-09-24 10:00:31

mixin真的蠻好用ㄉ上次跟你偷學後也寫了一篇ㄏㄏ

明天要來寫Extend,老司機上車了。

我要留言

立即登入留言