在前端工作中，组件封装是非常常见的，大致可以分为三类，一种是复杂页面的子组件，二是功能类组件，三是业务类组件，接下来，我会从这三个方面具体说一下
一，复杂页面子组件
当我们一个页面有太多功能需要实现时，我们通常会选择拆分为许多子组件，这样的好处是显而易见的，就是方便后期维护与管理，自己写的时候也能更加清晰明了，不会让代码看起来很乱。
拆分组件是非常容易的，但是思路一定要清晰，就是哪些可以拆分，一定要做到心中有数之后再去拆分，如果自己都没考虑好就一顿操作，很容易把自己给绕进去，让原本简单的事情变得更加复杂。
这里面需要明白父子组件之间的传值，了解哪些数据是要传给子组件的，以及子组件是怎么通过父组件修改数据的。
二，功能组件
其实现在有很多功能组件的库，基本上cv就可以解决绝大部分需求了，但是我觉得作为一个前端人员最好还是自己动手封装一下，我觉得自己上手封装有很多好处，比如：
- 有时候需要的功能不多，下个包就有点大材小用了，而且会让代码体积变大，这个时候自己封装一个反而更好。
- 另外，在遇到一些设计需求独特的，也可以自己搞定，不会让自己碰到这种问题就显得手足无措。
- 在我看来，最重要的就是自己封装过功能组件，才能更了解其中的流程，在使用一些功能时，能够更快上手。
接下来说一下功能组件封装的大致流程（以轮播图为列）：
- 在components中创建一个公共组件vuewenjian，
- 将需要实现的功能写在里面
<script lang="ts" setup name="XtxCarousel">
import { BannerItem } from '@/types/data';
import { onBeforeMount, onBeforeUnmount, onMounted, onUnmounted, ref } from 'vue';
// 接收传过来的数据
const {slides,autoPlay,duration} = defineProps<{
slides:BannerItem[] // 接收传过来的图片数据
autoPlay:boolean // 是否开启自动播放
duration:number // 自动播放的时间
}>()
const active = ref(0)
// 1,鼠标经过圆点实现切换
// 1.1 定义一个变量,通过变量与下标动态绑定active样式,完成圆点高亮
// 1.2 绑定鼠标结束事件,给active赋值,让圆点下标与active相等
// 1.3 图片根据样式fade进行切换,通过变量与下标进行动态绑定
// 2,点击左右图标实现左右切换
// 左 : 移动到左边最后一张时,切换到最后一张
const hleft = () => {
if(active.value===0){
active.value = slides.length-1
}else {
active.value--
}
}
// 右 : 移动到右边最后一张时,切换到第一张
const hright = () => {
if(active.value===4){
active.value = 0
}else {
active.value++
}
}
// 3,自动播放
// 3.1 添加定时器,自动向右边播放,等于点击向右按钮,调用向右按钮即可
onMounted(()=>{
start()
})
onBeforeUnmount(()=>{
stop()
})
let timer = -1
const play = () => {
// 根据传过来的值,决定是否开启自动播放
if(!autoPlay) return
// 在ts中，使用定时器，window.setInterval
timer = window.setInterval(()=>{
hright()
},duration)
}
// 4,鼠标移动到图片暂停播放
// 4.1 鼠标经过,停止播放
const stop = ()=>{
clearInterval(timer)
}
// 4.2 鼠标离开，继续播放
const start = ()=>{
play()
}
</script>
<template>
<div class="xtx-carousel" @mouseenter="stop" @mouseleave="start">
<ul class="carousel-body">
<li class="carousel-item " :class="{fade:active===index}" v-for="item,index in slides" :key="item.id">
<RouterLink to="/">
<img
:src="item.imgUrl"
alt=""
/>
</RouterLink>
</li>
</ul>
<!-- 左边按钮 -->
<a href="javascript:;" class="carousel-btn prev" @click="hleft"
><i class="iconfont icon-angle-left"></i
></a>
<!-- 右边按钮 -->
<a href="javascript:;" class="carousel-btn next" @click="hright"
><i class="iconfont icon-angle-right"></i
></a>
<!-- 下面小点 -->
<div class="carousel-indicator" >
<span @mouseover="active=index" :class="{active:active===index}" v-for="(it,index) in slides" :key="index"></span>
</div>
</div>
</template>
<style scoped lang="less">
.xtx-carousel {
width: 100%;
height: 100%;
min-width: 300px;
min-height: 150px;
position: relative;
.carousel {
&-body {
width: 100%;
height: 100%;
}
&-item {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: opacity 0.5s linear;
&.fade {
opacity: 1;
z-index: 1;
}
img {
width: 100%;
height: 100%;
}
}
&-indicator {
position: absolute;
left: 0;
bottom: 20px;
z-index: 2;
width: 100%;
text-align: center;
span {
display: inline-block;
width: 12px;
height: 12px;
background: rgba(0, 0, 0, 0.2);
border-radius: 50%;
cursor: pointer;
~ span {
margin-left: 12px;
}
&.active {
background: #fff;
}
}
}
&-btn {
width: 44px;
height: 44px;
background: rgba(0, 0, 0, 0.2);
color: #fff;
border-radius: 50%;
position: absolute;
top: 228px;
z-index: 2;
text-align: center;
line-height: 44px;
opacity: 0;
transition: all 0.5s;
&.prev {
left: 20px;
}
&.next {
right: 20px;
}
}
}
&:hover {
.carousel-btn {
opacity: 1;
}
}
}
</style>
- 思考哪些东西是需要改变的，把它们变成动态绑定
// 接收传过来的数据
const {slides,autoPlay,duration} = defineProps<{
slides:BannerItem[] // 接收传过来的图片数据
autoPlay:boolean // 是否开启自动播放
duration:number // 自动播放的时间
}>()
const play = () => {
// 根据传过来的值,决定是否开启自动播放
if(!autoPlay) return
// 在ts中，使用定时器，window.setInterval
timer = window.setInterval(()=>{
hright()
},duration)
}
- 将这个组件进行全局注册（因为功能组件可以复用，所以注册为全局组件最好）
// 1,导入公共组件
import CsCarousel from './XtxCarousel/CsCarousel.vue'
// 2,定义插件
export default {
install(app:App){
app.component('CsCarousel',CsCarousel)
}
}
main.ts中：
import XtxUIOne from '@/components02/index'
const app = createApp(App)
app.use(XtxUIOne)
- 在需要的地方进行调用，然后传需要改变的值就行了
<CsCarousel :slides="home.bannerList" :auto-play="true" :duration="500"></CsCarousel>
以上就是功能组件封装的流程了
三，业务组件
业务组件和它的名字意思一样，与具体项目紧密相关，可能会在项目中使用多次。或者时公司同一系列的项目中使用，这里面就要看具体的业务逻辑了，根据业务逻辑进行封装
以上是我个人对于组件封装的一些理解，希望对大家有帮助.....
