vue.use(plugin, arguments) 語法
參數(shù):
plugin(Function | Object)
-
用法:
如果vue安裝的組件類型必須為Function
或者是Object
如果是個對象虽另,必須提供install方法
如果是一個函數(shù)色难,會被直接當(dāng)作
install
函數(shù)執(zhí)行install
函數(shù)接受參數(shù),默認第一個參數(shù)為Vue,其后參數(shù)為注冊組件時傳入的arguments
組件.js
export const testObj = {
install(Vue, arg) {
}
}
export const testFn = founction(Vue, arg) {
}
index.js
import { testObj, testFn } from './組建.js'
Vue.use(testObj, arg)
Vue.use(testFn, arg)
建議組件采用第一種寫法枚赡,根據(jù)use源碼,當(dāng)采用第二種寫法時,this指針指向null
if (typeof plugin.install === 'function') {
plugin.install.apply(plugin, args)
} else if (typeof plugin === 'function') {
plugin.apply(null, args)
}
官方use源碼
import { toArray } from '../util/index'
export function initUse (Vue: GlobalAPI) {
Vue.use = function (plugin: Function | Object) {
// 限制了自定義組建的類型
const installedPlugins = (this._installedPlugins || (this._installedPlugins =
[]))
//保存注冊組件的數(shù)組,不存在及創(chuàng)建
if (installedPlugins.indexOf(plugin) > -1) {
//判斷該組件是否注冊過昵宇,存在return Vue對象
return this
}
//調(diào)用`toArray`方法
const args = toArray(arguments, 1)
args.unshift(this)
//將Vue對象拼接到數(shù)組頭部
if (typeof plugin.install === 'function') {
//如果組件是對象,且提供install方法儿子,調(diào)用install方法將參數(shù)數(shù)組傳入瓦哎,改變`this`指針為該組件
plugin.install.apply(plugin, args)
} else if (typeof plugin === 'function') {
//如果傳入組件是函數(shù),這直接調(diào)用柔逼,但是此時的`this`指針只想為`null`
plugin.apply(null, args)
}
//在保存注冊組件的數(shù)組中添加
installedPlugins.push(plugin)
return this
}
}
toArray
方法源碼
export function toArray (list: any, start?: number): Array<any> {
start = start || 0
let i = list.length - start
//將存放參數(shù)的數(shù)組轉(zhuǎn)為數(shù)組蒋譬,并除去第一個參數(shù)(該組件)
const ret: Array<any> = new Array(i)
//循環(huán)拿出數(shù)組
while (i--) {
ret[i] = list[i + start]
}
return ret
}