Vue.use()介紹：

vue官網(wǎng)介紹：




開(kāi)發(fā)插件
Vue.js 的插件應(yīng)該暴露一個(gè) install 方法。這個(gè)方法的第一個(gè)參數(shù)是 Vue 構(gòu)造器，第二個(gè)參數(shù)是一個(gè)可選的選項(xiàng)對(duì)象：

const install = function (Vue, options) {// 1. 添加全局方法或 propertyVue.myGlobalMethod = function () {// 邏輯...}// 2. 添加全局資源Vue.directive('my-directive', {bind (el, binding, vnode, oldVnode) {// 邏輯...}...})// 3. 注入組件選項(xiàng)Vue.mixin({created: function () {// 邏輯...}...})// 4. 添加實(shí)例方法Vue.prototype.$myMethod = function (methodOptions) {// 邏輯...} } export default {install }

Vue.use源碼

export function initUse (Vue: GlobalAPI) {Vue.use = function (plugin: Function | Object) {const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))if (installedPlugins.indexOf(plugin) > -1) {return this}// additional parametersconst args = toArray(arguments, 1)args.unshift(this)if (typeof plugin.install === 'function') {plugin.install.apply(plugin, args)} else if (typeof plugin === 'function') {plugin.apply(null, args)}installedPlugins.push(plugin)return this} }

從上面可以看出，Vue.use限制了傳入的參數(shù)是對(duì)象或函數(shù)，對(duì)插件進(jìn)行判斷是否已注冊(cè)，避免重復(fù)注冊(cè)，然后調(diào)用插件。

以elementUI為例

elementUI中install

import Pagination from '../packages/pagination/index.js'; import Dialog from '../packages/dialog/index.js'; import Autocomplete from '../packages/autocomplete/index.js'; import Dropdown from '../packages/dropdown/index.js'; ...const components = [Pagination,Dialog,Autocomplete,Dropdown,... ];const install = function(Vue, opts = {}) {components.forEach(component => {Vue.component(component.name, component);}); };export default {install, };

使用

import Vue from 'vue' import Element from 'element-ui' Vue.use(Element)

總結(jié)

以上是生活随笔為你收集整理的详解Vue.use使用与原理的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。