VUE3 组件封装

子组件：

html

<template>
    <!-- 轮播图 -->
    <div class="carousel" v-if="carouselList&&carouselList.length>0">
        <a-carousel autoplay>
            <div v-for="(item, index) in carouselList" :key="index">
                <a-image :src="item.img" :preview="false" />
            </div>
        </a-carousel>
    </div>
    <div class="carousel_emptyState" v-else>
        <a-image
          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
          :preview="false" />
    </div>
</template>

js

<script setup>
import { onMounted,getCurrentInstance,toRefs } from 'vue'
const { proxy } = getCurrentInstance();
const props = defineProps({ carouselList:Array })
const {  carouselList } = toRefs(props);
 onMounted(()=>{
    console.log('props',carouselList);
    console.log('proxy',proxy.$route);
 })
</script>

传参：

const props = defineProps(

{ carouselList:Array }

)

const {  carouselList } = toRefs(props);

 父组件：

 <!-- banner栏 -->
    <carousel :carouselList="coves" />

js:

import carousel from "../../components/carousel/carousel.vue";

data:
 coves: [],

赋值：
function getList() {
  let id = num.value;
  proxy.$api.getMarkArtice(id).then((res) => {
    // console.log("项目数据", res);
    if (res.code === 1) {
      articleList.value = res.data.list;
      coves.value = res.data.coves;
      
    }
  });
}