El significado del embalaje de componentes.
提示:本文技术栈为vue3+ts+antdv
- Para una mejor reutilización
- Desacoplar el código del proyecto
- Encapsular código reutilizable
- Mejor acoplamiento de la lógica del código (cuando un componente se reutiliza en varios lugares, solo necesita modificar el componente, en lugar de modificarlo en todas partes)
- Mejorar la eficiencia del desarrollo
El efecto de carga es similar al siguiente:
Cargando encapsulación de componentes (subcomponente)
<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>
Uso de componentes (componente principal)
<loading :spinning="loading" />
import Loading from '@/components/loading/index.vue' //引入
const loading = ref<boolean>(true) //定义变量
//显示加载动画
loading.value = true
//关闭加载动画
loading.value = false
Finalmente, se completa la encapsulación de un componente simple, para la encapsulación de componentes complejos, el autor lo actualizará más adelante...