Vue 3.0 组件复用教程：局部与全局注册实现及自动化方案

本教程对应的 GitHub 仓库为 vue3.0Study，所有阶段性学习成果均通过独立分支进行维护。

==========================

定义基础导航组件

定义一个基础组件

该基础组件旨在实现导航条中单个导航项的复用功能。

基础组件【导航组件】的核心功能是显示文字内容，并支持点击交互。明确任务目标后，即可开始开发。

在 component 目录下新建 Base 目录，并在其中创建文件 TopNav.vue。加入如下代码：


<template>
 <div class="topnav">
  {{title}}
 </div>
</template>
<script>
export default {
 name: 'topnav',
 props: ['title'],
 data: function () { return {
  text: '导航条'
 } }
}
</script>

在 About.vue 中加入以下红色部分的代码：


<template>
 <div class="about">
 <top-nav title="推荐"/>
 <HelloWorld msg="vue 官方相关资料的链接"/>
 </div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import TopNav from '@/components/Base/TopNav.vue'
export default {
 name: 'home',
 components: {
 HelloWorld, TopNav
 }
}
</script>

通过上述两步操作，即可在 About.vue 中引入新组件 TopNav。实际上，HelloWorld 组件同样具备复用能力。

所谓的复用具体表现如下：

<top-nav title="推荐"/>\n\n<top-nav title="军事"/>\n\n<top-nav title="社会"/>\n\n<top-nav title="科技"/>

这就是复用的体现。title 是 TopNav.vue 中 props 属性定义的内容。由此可见，props 是一个数组，其中的每个元素代表一个从父组件传递过来的【变量】，可以简单理解为变量。

上篇文章曾提及全局注册和局部注册的概念；本例展示的是【局部注册组件】。在将其转换为【全局注册组件】之前，建议先执行 git push 操作。

好的，在转换为【全局】模式之前，需要明确一个问题：全局注册与局部注册有何区别？

从上面的例子可以看出，使用 HelloWorld 或 TopNav 组件前必须先进行 import 操作。而全局注册的组件则无需单独 import。

实现组件全局注册

把组件变为全局组件

任何模块（此时可将组件视为模块）不可能在不 import 的情况下直接使用。全局注册组件只是在 main.js 中进行 import，然后通过 Vue.component( params ) 函数进行全局注册。

因此，全局注册组件并不复杂，只需在 main.js 中加入如下代码：


import TopNav from '@components/Base/TopNav'
Vue.component('TopNav', TopNav)

注意：Vue.component('TopNav', TopNav) 必须在 new Vue({ router, store, render: h => h(App) }).$mount('#app') 也就是根组件实例化之前定义。

然后去掉 About.vue 中 TopNav.vue 的引入：


<template><div class="about">
 <top-nav title="推荐"/>
 <top-nav title="军事"/>
 <top-nav title="社会"/>
 <top-nav title="科技"/>
 <HelloWorld msg="vue 官方相关资料的链接"/>
</div></template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
// import TopNav from '@/components/Base/TopNav.vue'
export default {
 name: 'home',
 components: {
 HelloWorld
 }
}
</script>

运行代码，可以发现并未报错。

自动化全局注册方案

这就是全局注册的效果。但还有一个问题：随着大型项目中基础组件数量增加，main.js 会变得杂乱。下面介绍的方法仅需数十行代码即可解决此问题。

首先引入两个 lodash 模块：


import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

通过以下代码可以找到包含基础模块的所有文件：


const requireComponent = require.context(
 /* 在 ./components/Base 文件夹中寻找基础模块 */
 './components/Base',
 /* 是否包含子文件夹 */
 true,
 /* 只要是 .vue 结尾的文件都是基础模块 */
 /[\w-]+\.vue$/
)

下一步便是遍历进行模块 import：


/* 对这个文件集合进行遍历 - import - 全局注册 */
requireComponent.keys().forEach(fileName => {
 /* 获取组件配置 */
 const componentConfig = requireComponent(fileName)
 /* 从文件名中得到组件名 */
 const componentName = upperFirst(
 camelCase(
  fileName
  /* 移除开头的 "./_" */
  .replace(/^\.\/_/, '')
  /* 去掉文件的后缀名，也即 .vue */
  .replace(/\.\w+$/, '')
 )
 )
 /* 全局注册组件 */
 Vue.component(componentName, componentConfig.default || componentConfig)
})

这样 './components/Base' 目录下的 *.vue 组件会自动被引入并注册为全局组件。

==========================

组件的复用便介绍到这里，相关代码也已经上传至 GitHub.

总结

以上所述是小编给大家介绍的vue3.0 CLI - 2.6 - 组件的复用入门教程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！

Vue 3.0 CLI 组件复用：从局部注册到自动全局注册

定义基础导航组件

实现组件全局注册

自动化全局注册方案

实用工具推荐