Vue自定義全局組件制作方法

qylost 發(fā)布于2019-08-21 17:56 / 3374人閱讀

摘要：查閱資料后發(fā)現(xiàn)，自定義的組件需要提供一個(gè)方法提供可選的組件名像這樣引入自己編寫(xiě)好的組件，然后創(chuàng)建一個(gè)對(duì)象，并包含一個(gè)方法，并使用方法注冊(cè)成全局組件，最后導(dǎo)出這個(gè)對(duì)象。

今天解決了一個(gè)長(zhǎng)期困擾著我的問(wèn)題，現(xiàn)在記錄一下，供日后參考。

涉及知識(shí)點(diǎn)是Vue.js官網(wǎng)教程中的插件使用

首先我遇到的問(wèn)題就是我自定義的組件如果需要在項(xiàng)目中其他組件中多次被調(diào)用，而我之前的解決方法就是簡(jiǎn)單的，哪里需要在哪引用。這無(wú)疑增加了許多代碼重復(fù)。

而在使用Vue.js的一些UI框架的時(shí)候則注意到，只需要在項(xiàng)目的入口文件中import這個(gè)插件然后在接著Vue.use(‘插件名’)。這樣就能在整個(gè)項(xiàng)目里面使用這個(gè)框架中的組件以及方法了。

查閱資料后發(fā)現(xiàn)，自定義的組件需要提供一個(gè)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

像這樣引入自己編寫(xiě)好的組件，然后創(chuàng)建一個(gè)對(duì)象，并包含一個(gè)install方法，并使用Vue.component()方法注冊(cè)成Vue全局組件，最后export default導(dǎo)出這個(gè)對(duì)象。

到此最關(guān)鍵的步驟已經(jīng)做好，接下來(lái)是最最關(guān)鍵的步驟。

我們需要在項(xiàng)目的入口文件中引入剛剛做好的組件，并且通過(guò)Vue.use(引入的組件)來(lái)使用插件。
到此，一個(gè)全局Vue組件就弄好了。我們?cè)谔峁﹊nstall方法的同時(shí)也可以通過(guò)Vue.$emit()的方法來(lái)觸發(fā)組件中的方法，但最近在使用Element UI時(shí)發(fā)現(xiàn)他們組件中的方法一般都是通過(guò)Vue.$refs()來(lái)觸發(fā)的。具體原因留到日后再做研究。

本文同步自我的博客