【D1n910】Vue全局注册自定义组件

正常操作，正常分析，大家好，我是D1n910。

最近日子过得很混乱。

使用 Element-UI 的时候，发现可以在任意的组件内都能直接使用 Element-UI 的组件，很方便。

一些通用的自定义组件也可以考虑这么做。

实现原理是 Vue.component 方法。

在组件旁边创建一个注册用的 js 文件，名字建议相同。

// myComponent.js

// 全局注册 myComponent

import myComponent from '../myComponent.vue'

export default {

install: function(Vue) {

   Vue.component('MyComponent', myComponent) // 自定义组件我习惯大驼峰

 }

}

然后一般在 main.js，也就是主要使用 Vue 对象的地方引入自定义组件，再调用 Vue.use 方法即可。Vue.use 会调用 install 函数

import MyComponent from '@/components/myComponent.js'

// ...

Vue.use(myComponent)

如果组件较多，也可专门抽离一个js文件出去进行引用。

End

延伸

查看 element 源码在install 的时候进行了批量注册。

node_modules/element-ui/src/index.js