iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 18
1
Modern Web

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

Day18 資源回收再利用-可複用性 prototype

prototype

我們在使用組件使用某些外部功能時,都需要使用import 將變數/方法載入進來,若是全局經常性複用,則會建議透過prototype掛載在vue的實體上。

我們應該要在 prototype 的命名加上 $ 符號當作前綴,主要是避免與組件內的方法名稱衝突到

As for the $ prefix, its purpose within the Vue ecosystem is special instance properties that are exposed to the user.

從這段話可以知道,Vue把這個 $ 符號用在公開的特殊實例屬性,例如:$router、$store、$root、$ref、$parent。

我們如何使用 prototype 呢?

import Vue from 'vue'
import VueCookies from 'vue-cookies'
import axios from 'axios'
Vue.prototype.$http = axios
Vue.prototype.$isDev = () => process.env.NODE_ENV === 'development'
Vue.prototype.$language = VueCookies.get('language') 

像這樣先寫好原型,我們就可以在任意地方調用,如this.$isDev()this.$languagethis.$http

整理一下複用的不同用途:
1.component: 視為一個完整的個體,有樣板能傳入props及傳出event
2.local mixins: 少部分元件會共用的函數
3.global mixins: 幾乎全局元件會共用到的函數
4.Vue.prototype: 與元件無相依性的函數或變數

我們可以用Vue.use(plugins)的方式,使用插件添加prototype,這個明天教

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


上一篇
Day 17 全世界都是我的伸展台-Vue Extend
下一篇
Day19 縱你虐我千百遍,我依然待你如插件,使用插件 Vue.use(plugin)
系列文
忍住不打牌位,只要30天VueJS帶你上A牌30

尚未有邦友留言

立即登入留言