主页 / 网络编程 /

vue3.0 CLI - 2.6 - 组件的复用入门教程

网络编程 2021-07-04 16:46www.168986.cn编程入门
这篇文章主要介绍了 vue3.0 CLI - 2.6 - 组件的复用，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下

我的 github 地址 - - 阶段学习成果都会建立分支。

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

定义一个基础组件

这个基础组件，是导航条中 可以复用 的基础组件 单个导航。

基础组件【导航组件】基础的功能是能够显示文字，单击的交互方式。明确任务目标之后，进行开发。

在 ponent 目录下新建 Base 目录，Base 下新建文件 TopNav.vue。加入如下代码

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

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

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

通过以上两步，就在 About.vue 中引入新组件 TopNav。其实 HelloWorld 也是可以复用的。

所谓的复用是啥意思呢？如下

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

这既是所谓的复用啦。 title 是 TopNav.vue 的 props 属性中的内容。以上看出，props 是一个数组，里边每个元素，是一个将要从父组件中传递过来的【变量】，对，变量，就是这么理解。

上篇文章提到过 全局注册 和 局部注册；这个例子，是 【局部注册组件】。在把它变为【全局注册组件】之前，先 git push 一下。

好的，在变【全局】之前，有个问题全局 和 局部 有什么区别？

上面的例子看见了，要用 HelloWorld 或 TopNav，必须先 import。而全局的，不用 import。

把组件变为全局组件

任何模块 ( 这时候把组件理解为模块 ) 不可能不用 import 就可以用，全局注册组件，只是在 main.js 中进行 import，然后通过 Vue.ponent( params ) 这个函数进行全局注册。

所以全局注册组件也并不神秘，在 main.js 加入如下代码

import TopNav from '@ponents/Base/TopNav'
Vue.ponent('TopNav', TopNav)

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

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

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

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

这就是全局注册。还是有个问题，大型项目基础组件多起来，这 main.js 便不好看。狼蚁网站SEO优化介绍的方法可以只用数十行代码，就可以解决。

引入两个 lodash 模块

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

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

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

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

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

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

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

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

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

上一篇：vue-cli脚手架build目录下utils.js工具配置文件详解 下一篇：在vue项目中使用md5加密的方法

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by