W250913/20.vue3/project3/src/App.vue

<template>
  <div class="text-xl">
    <h1
      class="text-5xl font-bold text-purple-600 text-center h-32 leading-[128px]"
    >
      Vue3组件通信
    </h1>
    <hr />
    <div class="flex p-6">
      <div class="w-64 flex flex-col">
        <RouterLink
          active-class="active"
          class="border h-12 flex justify-center items-center"
          to="/props"
          >1.props</RouterLink
        >
        <RouterLink
          active-class="active"
          class="border h-12 flex justify-center items-center"
          to="/custom"
          >2.custom</RouterLink
        >
        <RouterLink
          active-class="active"
          class="border h-12 flex justify-center items-center"
          to="/mitt"
          >3. mitt</RouterLink
        >
        <RouterLink
          active-class="active"
          class="border h-12 flex justify-center items-center"
          to="/refs"
          >4.refs-parent</RouterLink
        >
        <RouterLink
          active-class="active"
          class="border h-12 flex justify-center items-center"
          to="/attrs"
          >5. $attrs</RouterLink
        >
        <RouterLink
          active-class="active"
          class="border h-12 flex justify-center items-center"
          to="/provide"
          >6. provide-inject</RouterLink
        >
        <RouterLink
          active-class="active"
          class="border h-12 flex justify-center items-center"
          to="/slot1"
          >7. 默认插槽</RouterLink
        >
        <RouterLink
          active-class="active"
          class="border h-12 flex justify-center items-center"
          to="/slot2"
          >8. 具名插槽</RouterLink
        >
        <RouterLink
          active-class="active"
          class="border h-12 flex justify-center items-center"
          to="/slot3"
          >9. 作用域插槽</RouterLink
        >
      </div>
      <div class="flex-1 ml-8">
        <RouterView></RouterView>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
</script>

<style lang="scss" scoped>
.active {
  background: plum;
  color: #fff;
}
</style>