vue注册组件的方法

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第21天，点击查看活动详情

​ 组件的注册

在 Vue 中，组件的注册分全局注册和局部注册两种：

全局注册：用 Vue.component 来创建组件，注册之后可以在任何新创建的 Vue 根实例中使用； 局部注册：在单个 Vue 格式的文件中创建组件，在需要用到的地方进行注册； 但通常我们都是基于 Vue 工程进行开发的，会用到 webpack 这样的构建系统，而通过全局注册的组件在构建系统中即使没被使用依然会存在于构建结果中，所以我们通常选择局部注册。

组件的创建

每个 Vue 格式的文件都可以作为一个组件来使用。

在开发中,经常需要将业务进行组件化,我们就需要去注册组件,下面列举几种常用的注册组件的方法

局部注册

// 导入
import 组件对象 from '组件路径'

// 注册
components: {
    组件对象
}

全局注册

main.js下

// 导入
import 组件对象 from '组件路径'

// 注册
Vue.component('需要使用的组件名', 组件对象)

如果有多个全局组件，注册起来特别麻烦，每一个都得一个一个注册

特殊的全局注册组件方法

思路：以注册插件的方式注册组件

// 导入自定义插件
import pageTools from '@/components'

// 注册插件
Vue.use(pageTools)

use方法注册的插件是一个对象，内部有个install方法，vue会调用这个方法并把自身以参数传给这个install方法

利用webpack的方法来实现循环注册所有全局组件

export default {
  install(Vue) {
    const componentUrl = require.context('./', true, /.vue$/)
    componentUrl.keys().forEach(item => {
      const moduleObj = componentUrl(item).default
      Vue.component(moduleObj.name, moduleObj)
    })
  }
}

使用这个自定义插件，只要根据组件的name属性值来使用即可

组件的局部注册需要：

一个组件文件 HelloWorld；

在需要使用组件 HelloWorld 的 vue 文件 App 中引入组件 HelloWorld；

在 App 的 components 中注册组件 HelloWorld；

在 App 的 template 中使用组件；

当组件树形成时，组件间就有了层级关系，像上面这样的组件使用中，App.vue 就是父组件，而在它内部使用的 HelloWorld 就是子组件。 ​