VUE-项目实战-组件封装

通过接口获得数据后渲染轮播图表单。

<script setup>
import { getBannerAPI } from '@/apis/home'
import { onMounted, ref } from 'vue'

const bannerList = ref([])

const getBanner = async () => {
  const res = await getBannerAPI()
  console.log(res)
  bannerList.value = res.result
}

onMounted(() => getBanner())

</script>




<template>
    <div class="home-banner">
      <el-carousel height="500px">
        <el-carousel-item v-for="item in bannerList" :key="item.id">
          <img :src="item.imgUrl" alt="">
        </el-carousel-item>
      </el-carousel>
    </div>
  </template>


<style scoped lang='scss'>
.home-banner {
  width: 1240px;
  height: 500px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 98;

  img {
    width: 100%;
    height: 500px;
  }
}
</style>

封装轮播图代码

import { ref,onMounted } from "vue";
import { getBannerAPI } from '@/apis/home'


export function useBanner(){
    
const bannerList = ref([])

const getBanner = async () => {
  const res = await getBannerAPI({
    distributionSite:'2'
  })
  console.log(res)
  bannerList.value = res.result
}

onMounted(() => getBanner())

    return {
        bannerList
    }
}

最后，调用轮播图组件。

<script setup>
import { useBanner } from './composables/useBanner'
const { bannerList } = useBanner()



</script>

<template>
 <!-- 轮播图 -->
      <div class="home-banner">
        <el-carousel height="500px">
          <el-carousel-item v-for="item in bannerList" :key="item.id">
            <img :src="item.imgUrl" alt="">
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="sub-list">
</template>

1.模块化和复用性： 组件化开发使得代码模块化，易于维护和扩展。封装的组件可以在不同的地方重复使用，提高了代码的复用性。

2.清晰的组织结构： 通过组件化，应用的结构更加清晰。每个组件负责一个特定的功能，使得代码更易于理解和维护。

3.可维护性： 组件封装提高了代码的可维护性。每个组件都是相对独立的单元，修改一个组件不会影响到其他组件，降低了代码维护的难度。

4.提高开发效率： 组件封装使得开发者可以专注于单个组件的开发，不需要考虑整个应用的复杂性。这提高了开发效率，允许团队并行开发不同的组件。

5.灵活性： 组件的可配置性和插槽系统使得组件更加灵活，适应不同的使用场景。父组件可以通过 props 传递参数给子组件，通过插槽传递内容，实现更灵活的组合。

6.测试性： 单一职责的组件更容易进行单元测试，提高了应用的整体质量。

7.封装复杂性： 对于一些复杂的功能，封装成组件使得代码结构更加清晰，避免了代码冗余和混乱。