vue.use是一個官方API,是全域註冊元件或外掛程式的方法,如果外掛程式(plugin)是一個對象,必須提供install方法;如果外掛程式是函數,它會作為install方法。該方法需要在呼叫“New Vue()”之前被呼叫。
本教學操作環境:windows7系統、Vue2.9.6版,此方法適用於所有品牌電腦。
官方API介紹:
Vue.use(plugin)
參數
{Object | function} plugin
用法
安裝Vue.js 外掛程式。如果插件(plugin)是一個對象,必須提供install方法。如果插件是一個函數,它會作為install方法。 install方法呼叫時,會將Vue當作參數傳入。
該方法需要在呼叫New Vue()之前被呼叫。
當install方法被同一個插件多次調用,插件將只會被安裝一次。
Vue.use的使用
#Element-UI例子
根據ElementUI文檔,在Vue cli搭建的專案中這樣使用ElementUI
/* mian.js */ import Vue from 'vue'; import ElementUI from 'element-ui'; // 1 import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue'; Vue.use(ElementUI); // 2 new Vue({ el: '#app', render: h => h(App) });
以上程式碼便完成了Element的引入,需要注意的是,樣式檔案需要單獨引入。
後面就可以在Vue的單一檔案元件中直接使用
所以這到底發生了什麼事?
1、第一個註解導入ElementUI
import ElementUI from 'element-ui'
// TODO 理解如何導入模組
以下是src/index.js的內容。可以看到,index.js導出了一個對象,在上面的import語句中,這個物件被賦予ElementUI的變數名稱。請注意到這裡的install函數。
/* index.js */ export default { version: '2.11.1', locale: locale.use, i18n: locale.i18n, install, ... };
2、第二處註解安裝ElementUI
Vue.use(ElementUI);
我們觀察到這裡使用了Vue.use方法並將ElementUI這個物件傳入。從Vue.use文件中可以得知,這會呼叫ElementUI物件的install方法,並將Vue傳入。
// install函数 const install = function(Vue, opts = {}) { locale.use(opts.locale); locale.i18n(opts.i18n); // 安装组件:通过Vue.component声明全局组件,所以我们能够直接使用而不需要声明 components.forEach(component => { Vue.component(component.name, component); }); Vue.use(InfiniteScroll); Vue.use(Loading.directive); // 在Vue的原型链上做一些小动作所以所有的Vue实例都可以访问到这些生命的变量 // 变量名使用$开头表明这是公共API属性或者方法,这是一种约定。 Vue.prototype.$ELEMENT = { size: opts.size || '', zIndex: opts.zIndex || 2000 }; // ok,这里我们看到了许多用于提示的组件都设定在Vue原型链上,所以我们可以在Vue实例内部直接使用this.$alert Vue.prototype.$loading = Loading.service; Vue.prototype.$msgbox = MessageBox; Vue.prototype.$alert = MessageBox.alert; Vue.prototype.$confirm = MessageBox.confirm; Vue.prototype.$prompt = MessageBox.prompt; Vue.prototype.$notify = Notification; Vue.prototype.$message = Message; };
更多程式相關知識,請造訪:程式設計影片! !
以上是vue.use是什麼呀?的詳細內容。更多資訊請關注PHP中文網其他相關文章!