Vue3组件封装，以封装Loading组件为例

组件封装的意义

提示：本文技术栈为vue3+ts+antdv

• 为了更好的复用
• 进行项目代码解耦
• 封装可重用代码
• 代码逻辑更好的耦合（当一个组件被多处复用时，只需修改组件即可，不用每处都修改）
• 提高开发效率

loading效果类似于如下：

Loading组件封装(子组件)

<template>
  <a-spin size="large" class="postion" :spinning="data" />
</template>

<script lang="ts" setup>
const data = ref<boolean>(true)
const props = defineProps<{
    
    
  spinning: boolean
}>()
const {
    
     spinning } = toRefs(props)
watch(
  () => spinning.value,
  () => {
    
    
    data.value = spinning.value
  }
)
</script>

<style lang="less" scoped>
.postion {
    
    
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

组件使用（父组件）

 <loading :spinning="loading" />

import Loading from '@/components/loading/index.vue' //引入
const loading = ref<boolean>(true) //定义变量
//显示加载动画
loading.value = true
//关闭加载动画
loading.value = false

最终就完成了一个简单组件的封装，对于复杂组件封装，笔者后续更新…