vue3.0 CLI 真小白一步一步入手全教程系列：https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0Study - 阶段学习成果都会建立分支。 ========================== 定义一个基础组件 这个基础组件，是导航条中 可以复用 的基础组件 单个导航。 基础组件【导航组件】基础的功能是能够显示文字，单击的交互方式。明确任务目标之后，进行开发。 在 component 目录下新建 Base 目录，Base 下新建文件 TopNav.vue。加入如下代码： 复制代码 复制代码 在 About.vue 中加入以下红色部分的代码： 复制代码 复制代码 通过以上两步，就在 About.vue 中引入新组件 TopNav。其实 HelloWorld 也是可以复用的。 所谓的复用是啥意思呢？如下： 复制代码 复制代码 这既是所谓的复用啦。 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 的引入： 复制代码 复制代码 运行代码，可以发现并未报错。 这就是全局注册。还是有个问题，大型项目基础组件多起来，这 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.https://www.cnblogs.com/ndos/p/9642157.html