欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue.use()和Vue.prototype使用詳解

 更新時(shí)間：2024年10月11日 08:38:21   作者：_多拉不懂A夢(mèng)  
Vue.use()主要用于注冊(cè)全局插件,當(dāng)插件具有install方法時(shí),調(diào)用Vue.use()可以全局使用該插件,Vue.prototype用于注冊(cè)全局變量,這些變量在項(xiàng)目任何位置都可以通過(guò)this.$變量名訪問(wèn),兩者的主要區(qū)別在于Vue.use()用于插件,Vue.prototype用于變量

Vue.use()作用

官方文檔中提到，Vue.use()可以用來(lái)注冊(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ū)中提供了一系列輔助開(kāi)發(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è)類(lèi)的參數(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的變量可以全局訪問(wèn)。最典型的例子就是axios。

import axios from 'axios';
Vue.prototype.$http = axios;

注冊(cè)了axios之后就能在項(xiàng)目的位置使用了，使用的方法：

調(diào)用this.$http進(jìn)行訪問(wèn)。

實(shí)際上我們還要注意，使用Vue.prototype注冊(cè)的全局變量前面都要加上$符號(hào)，這是一種規(guī)范，主要是為了防止命名沖突。

Vue.use()和Vue.prototype的區(qū)別

講到這里，我們仔細(xì)看看這兩個(gè)方法的區(qū)別。

其實(shí)很顯而易見(jiàn)，Vue.use()用于注冊(cè)具有install方法的變量，注冊(cè)后install函數(shù)會(huì)自動(dòng)調(diào)用，使得install的具體變量能夠全局使用，包括全局變量，全局標(biāo)簽等等。

而Vue.prototype就是一個(gè)注冊(cè)全局變量的方法，注冊(cè)的全局的變量以$開(kāi)頭，調(diào)用this方法調(diào)用。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論