vue命令式元件和外掛程式編寫

2022-07-05 12:24:11 字數 2021 閱讀 3513

一直在寫各種業務,好多基本用法都忘記了,回顧一下:

一、vue各種ui庫里的命令式元件比如element-ui裡notification元件,可以這樣呼叫

this

.$notify();

命令式呼叫的元件寫法分三步:

這裡簡單寫個message元件演示一下

1.編寫message.vue檔案:

class="

message

" v-if="

show

">}

2.實現呼叫邏輯,messagefun.js檔案

import vue from

'vue

'import message

from

'./message.vue

'const msg =vue.extend(message);

export

default (options={}) =>}})

window.settimeout(()=>,options.time?options.time:3000

)}

3.掛載到原型,index.js裡

4.呼叫

this

.$msg(

);

效果:頁面右上角乙個訊息通知,4秒後自動消失

二、外掛程式定義編寫步驟

1.定義兩個簡單的元件,com1.vue和com2.vue

//

com2.vue

class="

demo

">

"">我是外掛程式二

class="

demo

">

"">我是外掛程式一

2.註冊全域性元件,com.js

import vue from 'vue'import com1 from './com1.vue'import com2 from './com2.vue'const coms =[

com1,

com2

]const install = function

(vue))}/*

支援使用標籤的方式引入

*/if (typeof window !== 'undefined' &&window.vue)

export

default

3.在index.js裡引入並vue.use()使用元件(use方法會呼叫物件的install方法)

4.使用這兩個元件

效果:

以上元件都寫的比較簡單,不過複雜的元件只是元件內部邏輯**複雜,編寫和使用流程再上邊已經闡述完畢。 

Vue 元件和外掛程式的關係

我們通常在src的目錄下,新建乙個component資料夾來存放公共的元件,在我們要使用元件的頁面中引入元件,並且進行乙個說明。元件個呼叫它的頁面之間的通訊,就是父元件和子元件的通訊方式。import rule from components rule.vue export default data...

Vue函式式元件

用法,在template標籤使用 functional class y divider y divider props.direction class y divider text is props.position v if slots default props.direction vertic...

lml 外掛程式管理,外掛程式式框架,元件開發

lml從您當前的python環境中無縫地找到基於lml的外掛程式,然後根據需要載入外掛程式。外掛程式發現模組。它支援通過pip工具和pyinstaller安裝的外掛程式。lml.loader.scan plugins prefix,pyinstaller path,black list none,w...