vue3实现动态排序各子页面顺序，子页面位置不固定

一般来说，页面写了子页面引入，子页面就固定在那里了。
假如我想设置子页面A、子页面B、子页面C可以随机打乱顺序排序，不固定谁在第一位。
以下是实现代码

<template>
 <div>
    <component v-for="item in componentList" :is="tabs[item.id]"></component>
 </div>
</template>

<script setup>
import PageA from '@/components/pageA.vue';
import PageB from '@/components/pageB.vue';
import PageC from '@/components/pageC.vue';

// 自行设置componentList，就能动态排序各子页面顺序了
const componentList = [
 {"id": "PageB"},
 {"id": "PageA"},
 {"id": "PageC"},
];
const tabs = {
 PageA,
 PageB,
 PageC
}
</script>

若父页面想给子页面传参，那就跟之前父子页面传参方式一样了，:param=“父页面param”，子页面只需要接收使用就行。