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()来触发的。具体缘由留到往后再作研究。

本文同步自个人博客