Vue自定義全局組件製做方法

今天解決了一個長期困擾着個人問題，如今記錄一下，供往後參考。

涉及知識點是Vue.js官網教程中的插件使用

首先我遇到的問題就是我自定義的組件若是須要在項目中其餘組件中屢次被調用，而我以前的解決方法就是簡單的，哪裏須要在哪引用。這無疑增長了許多代碼重複。

而在使用Vue.js的一些UI框架的時候則注意到，只須要在項目的入口文件中import這個插件而後在接着Vue.use(‘插件名’)。這樣就能在整個項目裏面使用這個框架中的組件以及方法了。

查閱資料後發現，自定義的組件須要提供一個install方法

import sideblockComponent from './sideBlock'
const defaultComponentName = 'sidebar'

const Sidebar = {
    install(Vue, options = {}) {
        const componentName = options.componentName || defaultComponentName //提供可選的組件名
        Vue.component(componentName, sideblockComponent)
    }
}

export default Sidebar

像這樣 引入本身編寫好的組件，而後建立一個對象，幷包含一個install方法，並使用Vue.component()方法註冊成Vue全局組件，最後export default導出這個對象。

到此最關鍵的步驟已經作好，接下來是最最關鍵的步驟。

---

咱們須要在項目的入口文件中引入剛剛作好的組件，而且經過Vue.use(引入的組件)來使用插件。
到此，一個全局Vue組件就弄好了。咱們在提供install方法的同時也能夠經過Vue.$emit()的方法來觸發組件中的方法，但最近在使用Element UI時發現他們組件中的方法通常都是經過Vue.$refs()來觸發的。具體緣由留到往後再作研究。

本文同步自個人博客