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

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

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

Vue.use()作用

官方文檔中提到，Vue.use()可以用來注冊全局的插件。使用Vue.use()后可以使得插件能夠在項目的任意位置上使用。

那么什么時候使用Vue.use()呢？

其實官方文檔中也給出了很詳細的答案，就是當一個插件對象或者函數，擁有install方法時，就使用Vue.use()。

調用Vue.use()時會調用插件的install方法，使得其能夠全局使用。

Vue的使用場景

1.ElementUI、VueRouter等官方插件的使用

在vue官方社區(qū)中提供了一系列輔助開發(fā)的插件，其中就有很多插件具有install方法，比如ElementUI和VueRouter，我們使用Vue.use()進行引入。

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 是默認的方法。當外界在 use 這個組件的時候，就會調用本身的 install 方法，同時傳一個 Vue 這個類的參數。
  install: function (Vue) {
    Vue.component('Icon', Icon)
  }
}
// 導出
export default IconConponents

在main.js中進行注冊插件

import Icon from './global'
Vue.use(Icon)

Vue.prototype作用

vue.prototype是一種注冊全局變量的方式，使用vue.prototype的變量可以全局訪問。最典型的例子就是axios。

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

注冊了axios之后就能在項目的位置使用了，使用的方法：

調用this.$http進行訪問。

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

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

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

其實很顯而易見，Vue.use()用于注冊具有install方法的變量，注冊后install函數會自動調用，使得install的具體變量能夠全局使用，包括全局變量，全局標簽等等。

而Vue.prototype就是一個注冊全局變量的方法，注冊的全局的變量以$開頭，調用this方法調用。

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關文章

最新評論