搭建自己的 vue 元件庫（一） —— vue 外掛開發基礎知識

閒不住的李先森發表於2018-09-07
Vue元件

外掛開發

(來自官網 vue 外掛開發)VUE 大部分的外掛都是在為 vue 新增全域性的功能，這些新增全域性的方法無外乎下面的幾種方式:

  1. 新增全域性方法或者屬性：
Vue.uiname = 'star-ui-vue'

// 在專案中，可以通過 Vue.uiname 拿到 uiname 的值
複製程式碼
  1. 新增全域性資源: 指令/過濾器/過渡
  2. 通過全域性 mixin 方法新增一些元件選項
  3. 新增 vue 例項方法。通過把他們新增到 vue.prototype 實現 我們在使用 script 引入 vue 的時候通常先 new 一個 vue 的例項，這是因為 vue 本身是一個物件，他為我們提供了像 $set 這樣的全域性方法，所以在製作 vue 外掛的時候，我們可以仿照這種方式，給 vue 的 prototype 新增全域性的屬性或者方法。
  4. 通過提供上述的一個或者多個外掛的實現方法，實現一個庫。

外掛封裝

vue 的外掛應該有一個公開的 install 方法。 這個方法的第一個引數是 Vue 構造器， 第二個引數是一個可選的物件。

const MyPlugin = {
    install (Vue,options) {
        // 1. 新增全域性屬性或方法
        Vue.pluginName = 'MyPlugin'
        Vue.pluginMethods = () => {
            console.log('self methods')
        }

        //2. 新增全域性資源
        Vue.directive('my-directive',{
            bind(el,binding,vnode){...}
        })
        Vue.filter('my-filter',(val) => '$' + val)

        // 3. 全域性 mixin 注入
        Vue.mixin({
            created(){
                console.log('mixin')
            },
            data(){
                return {
                    initData: 'init data'
                }
            }
        })

        // 4. 新增例項方法或者屬性
        Vue.prototype.$myMethod = (option) => {
            console.log('my method')
        }
    }
}
複製程式碼

使用外掛

通過全域性方法 Vue.use() 使用外掛

// main.js
import Vue from 'Vue'
import MyPlugin from 'myPlugin'

Vue.use(MyPlugin)

// 1. 檢視全域性 屬性 或者呼叫全域性的方法
console.log(Vue.pluginName)   // 'MyPlugin'
Vue.pluginMethods()    // 'self methods'

...

複製程式碼
// App.vue

// 2. 呼叫全域性資源
<button my-directive></button>	

// 3. 全域性 mixin 注入時  定義的 data 或者方法 將會 合併 在所有的 vue 元件中 

// 4. 新增例項方法或者屬性

methods:{
    test(){
        this.$myMethod()   // 'my method'
    }
}


複製程式碼

多次註冊

Vue.use 會自動阻止多次註冊相同外掛，屆時只會註冊一次該外掛。

實現方式


export function initUse(Vue:GlobalAPI){
    Vue.use function (plugin: Function | object) {
        // 先拿到當前已經註冊的所有元件   不存在的話就建立
        const installedPlugins = (this._initlledPlugins || this.installedPlugins = [])

        // 判斷該元件是否建立，如果建立就直接返回
        if(installedPlugins.indexOf(plugin) > -1) {
            return this
        }
        ...
    }
}

複製程式碼

相關文章