当前栏目
Vue3如何封装组件?
🔥🔥🔥欢迎关注csdn前端领域博主: 前端小王hs
🔥🔥🔥email: 337674757@qq.com
🔥🔥🔥前端交流群: 598778642
在开发Vue3项目的过程中,我们经常会使用组件去进行复用或者用组件去简洁index.vue文件,那什么是组件呢?如果把index.vue文件说成是一栋大楼的话,那组件就是一块块砖
通常我们使用的element框架里的按钮,表格,弹窗等也算是组件,我们可以通过element文档中的教程之间引用就行
本篇说的封装组件则是在大型开发中常用的封装组件,用于进行组件复用等操作
例如我们在使用element的标签页tabs组件时,如下图所示:
tabs组件可以通过选项卡功能去切换标签页,当我们在index.vue文件使用tabs时,我们需要在每一个标签内去写要写的内容
<template>
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane label="User" name="first">要写的内容</el-tab-pane>
<el-tab-pane label="Config" name="second">要写的内容</el-tab-pane>
<el-tab-pane label="Role" name="third">要写的内容</el-tab-pane>
<el-tab-pane label="Task" name="fourth">要写的内容</el-tab-pane>
</el-tabs>
</template>
这样的话,我们在index.vue文件就可能写上几百行上千行的代码,这样对于编写后续代码和对代码进行维护都是一件不容易的事情,所以我们可以对每个标签页的内容都进行封装成一个个组件
方法如下:
①创建一个components目录,并在目录下创建对应的组件.vue文件
②把对应的标签页内容放进对应的组件.vue中,不要忘了加上script和style内容
③在index.vue文件中通过import...from...
引入对应的组件
④在标签页中放组件即<el-tab-pane label="User" name="first"><组件名/></el-tab-pane>
有时候会发现进行了组件封装后,页面变空白报错了,那原因可能有如下几个:
①是没有引入script文件
②是在script文件中没有写上setup或者lang=ts
③引入组件名字错误
同理是如果引入的页面样式发生了变化,那就是没有引入style或者在style中少写了原文件中的lang=scss之类的预编译语言标记
在开发中的思路有两种:一是先在index.vue中进行写,写完布局后再封装组件,这种情况下需要注意script和style中要写上对应tabs页面的注释,防止要封装组件了不知道这个函数是哪个组件的;二是直接在组件中进行编写,写完后再引入到主文件中,这样的话需要注意布局对index.vue的影响
如有前端开发上的问题,可私聊博主
相关文章
- TiDB Binlog 组件正式开源
- 使用Visual Studio Code对Node.js进行断点调试
- 推荐!数据可视化的十种优秀JavaScript图表库
- Node.js在复杂集成场景下占据统治地位的五个理由
- 玩转Node.js单元测试
- Node.js中内存泄漏分析
- Angular对React:一场关于Web开发者支持率的史诗对决
- 热点推荐:什么是后端开发?
- 谈谈Spring boot 启动层面的开发
- 使用NodeJS将文件或图像上传到服务器
- 编写React组件的最佳实践
- JavaScript MV*框架最值得关注的七个亮点
- 前端开发指南:如何利用PHP Cake框架构建应用
- 基于React与Vue后,移动开源项目Weex如何定义未来
- NodeJS和C++之间的类型转换
- jQuery中的常用到的三十九个技巧
- 官宣|Google Developers中国网站发布!
- NodeJS和C++之间的类型转换
- .NET Core首例Office开源跨平台组件(NPOI Core)
- 如何写出漂亮的React组件