1. 程式人生 > 其它 >Vue.use() 和 Vue.component() 的區別

Vue.use() 和 Vue.component() 的區別

官方定義:

Vue.use( plugin )

  • 引數:

    • {Object | Function} plugin
  • 用法:

    安裝 Vue.js 外掛。如果外掛是一個物件,必須提供install方法。如果外掛是一個函式,它會被作為 install 方法。install 方法呼叫時,會將 Vue 作為引數傳入。

    該方法需要在呼叫new Vue()之前被呼叫。

    當 install 方法被同一個外掛多次呼叫,外掛將只會被安裝一次。

  • 參考:外掛

Vue.component( id, [definition] )

  • 引數:

    • {string} id
    • {Function | Object} [definition]
  • 用法:

    註冊或獲取全域性元件。註冊還會自動使用給定的id設定元件的名稱

    // 註冊元件,傳入一個擴充套件過的構造器
    Vue.component('my-component', Vue.extend({ /* ... */ }))
    
    // 註冊元件,傳入一個選項物件 (自動呼叫 Vue.extend)
    Vue.component('my-component', { /* ... */ })
    
    // 獲取註冊的元件 (始終返回構造器)
    var MyComponent = Vue.component('my-component')
  • 參考:元件

2、當我們想好多地方要是用到同一個元件,又不想每次都在區域性註冊時,可以在main.js 中全域性註冊

main.js

import common from '@/components/common.vue'

Vue.component(common);

3、Vue.use() 可以一次性註冊多個元件或新增全域性方法或屬性

Vue.use(plugin)的初始化方法{install:function(){}}裡面可以一次性註冊多個元件。
Vue.component只能一個一個註冊。
install可以做更多的事情
MyPlugin.install=function(Vue,options){
//1.新增全域性方法或屬性
Vue.myGlobalMethod=function(){
//邏輯...
}
//2.新增全域性資源
Vue.directive('my-directive',{
bind(el,binding,vnode,oldVnode){
//邏輯...
}
...
})
//3.注入元件選項
Vue.mixin({
created:function(){
//邏輯...
}
...
})
//4.新增例項方法
Vue.prototype.$myMethod=function(methodOptions){
//邏輯...
}
}