Vue.use()和Vue.prototype使用詳解
Vue.use()作用
官方文檔中提到，Vue.use()可以用來注冊(cè)全局的插件。使用Vue.use()后可以使得插件能夠在項(xiàng)目的任意位置上使用。
那么什么時(shí)候使用Vue.use()呢？
其實(shí)官方文檔中也給出了很詳細(xì)的答案，就是當(dāng)一個(gè)插件對(duì)象或者函數(shù)，擁有install方法時(shí)，就使用Vue.use()。
調(diào)用Vue.use()時(shí)會(huì)調(diào)用插件的install方法，使得其能夠全局使用。
Vue的使用場(chǎng)景
1.ElementUI、VueRouter等官方插件的使用
在vue官方社區(qū)中提供了一系列輔助開發(fā)的插件，其中就有很多插件具有install方法，比如ElementUI和VueRouter，我們使用Vue.use()進(jìn)行引入。
import Vue from 'vue' import VueRouter from 'vue-router'; import Element from 'element-ui' Vue.use(VueRouter); Vue.use(Element);
2.自定義插件，并提供install方法
除了使用官方的插件，我們也可以自定義一些含有install方法的插件
import Icon from '../components/icon/index'
const IconConponents = {
// install 是默認(rèn)的方法。當(dāng)外界在 use 這個(gè)組件的時(shí)候，就會(huì)調(diào)用本身的 install 方法，同時(shí)傳一個(gè) Vue 這個(gè)類的參數(shù)。
install: function (Vue) {
Vue.component('Icon', Icon)
}
}
// 導(dǎo)出
export default IconConponents在main.js中進(jìn)行注冊(cè)插件
import Icon from './global' Vue.use(Icon)
Vue.prototype作用
vue.prototype是一種注冊(cè)全局變量的方式，使用vue.prototype的變量可以全局訪問。最典型的例子就是axios。
import axios from 'axios'; Vue.prototype.$http = axios;
注冊(cè)了axios之后就能在項(xiàng)目的位置使用了，使用的方法：
調(diào)用this.$http進(jìn)行訪問。
實(shí)際上我們還要注意，使用Vue.prototype注冊(cè)的全局變量前面都要加上$符號(hào)，這是一種規(guī)范，主要是為了防止命名沖突。
Vue.use()和Vue.prototype的區(qū)別
講到這里，我們仔細(xì)看看這兩個(gè)方法的區(qū)別。
其實(shí)很顯而易見，Vue.use()用于注冊(cè)具有install方法的變量，注冊(cè)后install函數(shù)會(huì)自動(dòng)調(diào)用，使得install的具體變量能夠全局使用，包括全局變量，全局標(biāo)簽等等。
而Vue.prototype就是一個(gè)注冊(cè)全局變量的方法，注冊(cè)的全局的變量以$開頭，調(diào)用this方法調(diào)用。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vuex,iView UI面包屑導(dǎo)航使用擴(kuò)展詳解
今天小編就為大家分享一篇Vuex,iView UI面包屑導(dǎo)航使用擴(kuò)展詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
樹形下拉框是一個(gè)帶有下列樹形結(jié)構(gòu)的下拉框,本文主要介紹了Vue Treeselect樹形下拉框的使用小結(jié),具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10
本文詳細(xì)介紹了如何在Vue項(xiàng)目中集成和使用富文本編輯框,并分享了一些實(shí)踐經(jīng)驗(yàn),介紹了為什么需要富文本編輯框,Vue中常用的富文本編輯器,以及如何安裝、配置和使用Vue-Quill-Editor,本文還提供了一些基本的配置示例,幫助開發(fā)者在實(shí)際項(xiàng)目中根據(jù)需求進(jìn)行更多探索和定制2024-10-10
關(guān)于vue-property-decorator的基礎(chǔ)使用實(shí)踐
這篇文章主要介紹了關(guān)于vue-property-decorator的基礎(chǔ)使用實(shí)踐，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue-router后臺(tái)鑒權(quán)流程實(shí)現(xiàn)
本文主要介紹了vue-router后臺(tái)鑒權(quán)流程實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue3 封裝 element-plus 圖標(biāo)選擇器實(shí)現(xiàn)步驟
這篇文章主要介紹了Vue3 封裝 element-plus 圖標(biāo)選擇器,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
基于vue2.0實(shí)現(xiàn)的級(jí)聯(lián)選擇器
這篇文章主要介紹了基于vue2.0實(shí)現(xiàn)的級(jí)聯(lián)選擇器，基于Vue的級(jí)聯(lián)選擇器，可以單項(xiàng)，二級(jí)， 三級(jí)級(jí)聯(lián)，多級(jí)級(jí)聯(lián)，有興趣可以了解一下2017-06-06
本篇文章主要介紹了Vue DevTools調(diào)試工具的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
vue Treeselect 樹形下拉框:獲取選中節(jié)點(diǎn)的ids和lables操作
這篇文章主要介紹了vue Treeselect 樹形下拉框:獲取選中節(jié)點(diǎn)的ids和lables操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue實(shí)現(xiàn)一個(gè)懶加載的樹狀表格實(shí)例
這篇文章主要介紹了vue實(shí)現(xiàn)一個(gè)懶加載的樹狀表格實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05