＜script setup＞形式中props传值（数组）

父组件

<template>
  <div class="about">
    <aaa title="1" :listData="foods"></aaa><br>
    <aaa title="2" :listData="foods2"></aaa><br>
    <aaa title="3" :listData="foods3"></aaa>
  </div>
</template> 

<script>
import aaa from '@/views/a.vue'

export default {
  data() {
    return {
      foods: ['one', 'two', 'three'],
      foods2: ['one2', 'two2', 'three2'],
      foods3: ['one3', 'two3', 'three3'],
    }
  },
  components:{
    aaa
  }
}

</script>

子组件

<template>
    <div>
        <ul>
            <li v-for="(item,index) in listData" :key="index">{{ item }}</li>
        </ul>
    </div>
</template>

<script lang="ts">
export default {
    props:['title','listData']
}
</script>

<style lang="less" scoped>

</style>

＜script setup＞形式中

父组件

<template>
  <div class="about">
    <aaa title="1" :listData="foods"></aaa><br>
    <aaa title="2" :listData="foods2"></aaa><br>
    <aaa title="3" :listData="foods3"></aaa>
  </div>
</template> 

<script setup>
import aaa from '@/views/a.vue'
import { ref } from 'vue';

const foods = ref(['one', 'two', 'three'])
const foods2 = ref(['one2', 'two2', 'three2'])
const foods3 = ref( ['one3', 'two3', 'three3'])


</script>

子组件

<template>
    <div>
        <ul>
            <li v-for="(item,index) in listData" :key="index">{{ item }}</li>
        </ul>
    </div>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue';

const props = defineProps({
    title:String,
    listData:Array,
})

</script>