欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-29 16:47:00
我的 github 地址 - vue3.0study - 阶段学习成果都会建立分支。 ========================== 定义一个基础组件 这个基础...

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

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

定义一个基础组件

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

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

在 component 目录下新建 base 目录,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="推荐"/>
<top-nav title="军事"/>
<top-nav title="社会"/>
<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 - 组件的复用入门教程,希望对大家有所帮助