纯小白入手 vue3.0 CLI - 2.6 - 组件的复用
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html
我的 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 - 组件的复用的更多相关文章
- 纯小白入手 vue3.0 CLI - 2.7 - 组件之间的数据流
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...
- 纯小白入手 vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...
- 纯小白入手 vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...
- 纯小白入手 vue3.0 CLI - 2.1 - 组件 ( component )
vue3.0 CLI 真小白入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0Study ...
- 纯小白入手 vue3.0 CLI - 3.3 - 路由的导航守卫
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...
- 纯小白入手 vue3.0 CLI - 3.2 - 路由的初级使用
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...
- 纯小白入手 vue3.0 CLI - 3.1 - 路由 ( router )
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...
- 纯小白入手 vue3.0 CLI - 2.5 - 了解组件的三维
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...
- 纯小白入手 vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...
随机推荐
- spring boot 中使用swagger 来自动生成接口文档
1.依赖包 <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swa ...
- 03-01 Java运算符
(1)算术运算符 A:+,-,*,/,%,++,-- B:+的用法 a:加法 b:正号 c:字符串连接符 C:/和%的区别 数据做除法操作的时候,/取得是商,%取得是余数 D:++和--的用法 a:他 ...
- Strom的trident单词计数代码
/** * 单词计数 */ public class LocalTridentCount { public static class MyBatchSpout implements IBatchSpo ...
- 【从0到1学Web前端】CSS伪类和伪元素 分类: HTML+CSS 2015-06-02 22:29 1065人阅读 评论(0) 收藏
1.CSS中的伪类 CSS 伪类用于向某些选择器添加特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...
- Python学习--12 异常处理、调试
异常捕获 语法格式: try: pass except xxx as e: pass except xxx as e: pass ... else: pass finally: pass except ...
- [Python 从入门到放弃] 2. 列表的其它操作
1. 列表可以混合不同类型的数据项 movies=['<黄飞鸿之英雄有梦>','<寒战2>','<乘风破浪>'] 在这句代码中,数据项为电影名称,现在这个列表用来保 ...
- MVC源码分析 - Action/Result 过滤器执行时机
前面 的篇章, 解析了Action方法的查找, 以及 Authorize, Action, Result, Error 过滤器的加载时机. 也花了两篇去看授权和错误过滤器的使用. 但是对于 Actio ...
- vue-cli 使用Mint-UI
在安装好的vue-cli的项目基础上,安装Mint-UI cnpm install mint-ui -save //引入全部组件import Mint from 'mint-ui'import 'mi ...
- GoogLeNetv2 论文研读笔记
Batch Normalization: Accelerating Deep Network Training by Reducing Internal Covariate Shift 原文链接 摘要 ...
- ElasticSearch 学习记录之Text keyword 两种基本类型区别
ElasticSearch 系列文章 1 ES 入门之一 安装ElasticSearcha 2 ES 记录之如何创建一个索引映射 3 ElasticSearch 学习记录之Text keyword 两 ...