Vue.use() 和 Vue.component() 的區別
阿新 • • 發佈:2021-09-29
官方定義:
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){ //邏輯... } }