vue3 script setup 中使用 component 动态切换导航栏

//父组件
<template>
  <Header @changeNav="changeNav"></Header>
  <component :is="dom[activeNav.type]"></component>
</template>
<script setup >
import Header from "@/components/header/index.vue"; 
import Home from "@/pages/home/index.vue";
import Essay from "@/pages/essay/index.vue";
import Share from "@/pages/share/index.vue";
import About from "@/pages/about_/index.vue";
import SpecialColumn from "@/pages/specialColumn/index.vue";
import { shallowRef, ref, reactive } from "vue";
let activeNav = reactive({
  type: "Home",
});
let dom = shallowRef({
  'Home': Home,
  'Essay': Essay,
  'Share': Share,
  'About': About,
  'SpecialColumn': SpecialColumn,
});
let changeNav = (item) => {
  console.log(item);
  activeNav.type = item;
};
</script>

 //子组件
<template>
  <div class="h-16 lh64 bg-gray-600 border-b-2 border-green-400">
    <div class="w-3/5 ht100 m0auto flex justify-between">
      <div  class=" text-center f30 text-white Sounso w-24 inline-block flex-initial mr-5">Eden
      </div>
      <div class="flex justify-between text-white Sounso text-center w-4/5">
        <div
          class="w-1/5 cursor-pointer"
          @click="change(item)"
          v-for="item in list.navList"
          :key="item.id"
        >
          {{ item.title }}
        </div>
      </div>
    </div>
  </div>
</template>

    
<script setup lang='ts'>
import { reactive,ref} from "vue";
const emit = defineEmits(["changeNav"]);
const list = reactive({
  navList: [
    {
      id: 1,
      value:"Home",
      title: "网站首页",
      icon: "",
    },
    {
      id: 2,
      title: "文章专栏",
      value:"Essay",
      icon: "",
    },
    {
      id: 3,
      title: "资源分享",
      value:"Share",
      icon: "",
    },
    {
      id: 4,
      title: "归档整理",
      value:'SpecialColumn',
      icon: "",
    },
    {
      id: 5,
      title: "关于本站",
      icon: "",
      value:"About"
    },
  ]
});
  let change= (item:any)=>{
  emit('changeNav',item.value)
  }
</script>