Vue提高19 外掛程式

2021-09-24 09:19:08 字數 2354 閱讀 8810

(1)元件分為全域性註冊和區域性註冊,全域性註冊使用vue.component('componetname', component)實現,全域性註冊後可以在vue系統中任意使用,區域性註冊的元件每次使用都需要import,然後在元件的componentes中註冊,它的目的是復用模板和邏輯,影響的範圍大多數是元件自身範圍內

(2)外掛程式的範圍和能力比元件更大,外掛程式內可以包含多個元件,可以在外掛程式內註冊全域性元件,並且可以實現其他功能,比如:

使用元件需要通過全域性方法vue.use()實現,需要在呼叫new vue之前完成

vue.use(mydatepicker);

new vue(,

router,

});

也可以傳入乙個可選的選項物件:

vue.use(mydatepicker, );
vue.use會自動阻止多次註冊相同外掛程式,即使多次呼叫也只會註冊一次該外掛程式。

外掛程式應該暴露乙個install方法,提供給vue.use()呼叫。

install方法第乙個引數是vue構造器,第二個引數是傳入的可選的選項物件

myplugin.install = function (vue, options) 

// 2. 新增全域性資源

vue.directive('my-directive',

...})

// 3. 注入元件選項

vue.mixin(

...})

// 4. 新增例項方法

vue.prototype.$mymethod = function (methodoptions)

}

通過在vue構造器上新增一些屬性、方法,就可以實現新增全域性的方法和屬性。

install方法也可以通過vue.component註冊全域性元件:

import mydatepicker from './mydatepicker'

export default

}

首先建立乙個myloading.vue,接受乙個msg引數顯示在元件內部,loading的效果通過css實現:

this is my loading -- }

然後建立外掛程式主體檔案,建立index.js,這個檔案需要匯出乙個物件,物件中必須有乙個install方法,在install方法中來完成主要的邏輯

import myloading from './myloading'

export default

const tpl = new comp( }).$mount().$el;

settimeout(function () , 3000)

}}}

在上面的**中,定義了例項的showpicker方法,在這個方法中首先使用vue.extend來建立乙個繼承自myloading的vue子類,然後使用new關鍵字將其實例化。

注意,使用new建立的例項,想要傳遞給元件props,必須使用propsdata引數

var comp = vue.extend(}'})

var vm = new comp(

})

使用外掛程式的時候在main.js中:

import myloading from '@/plugin/myloading/index'

vue.use(myloading);

這樣在任意vue中間中就可以呼叫例項的this.showpicker()方法動態的建立乙個loading元素,3秒後自動消失。

show loading

這是命令式的建立動態例項,適合loading、對話方塊等形式的元素。主要的思路和之前總結的筆記《vue提高09 動態建立例項》類似。

當然也可以在外掛程式中註冊全域性元件,類似於elementui的用法。

npm外掛程式開發 Vue外掛程式

vue init webpack npm vue ui,dependencies browserslist 1 last 2 versions not ie 8 devdependencies const path require path const webpack require webpack...

什麼是vue外掛程式,vue外掛程式怎麼使用?

官方解釋 外掛程式通常用來為 vue 新增全域性功能。外掛程式的功能範圍沒有嚴格的限制 一般有下面幾種 新增全域性方法或者屬性。如 vue custom element 新增全域性資源 指令 過濾器 過渡等。如 vue touch 通過全域性混入來新增一些元件選項。如 vue router 新增 v...

vue外掛程式開發

vue外掛程式開發主要是用來實現一些全域性方法或者全域性物件。vue的外掛程式要求是實現乙個install公開方法。其中此install方法的第乙個入參是vue構造器,第二個入參是 是乙個可選的選項物件。一 開發 以乙個alert的彈窗外掛程式為示例,alert.js 具體 如下 定義乙個全域性變數...