请教vue动态组件渲染成html标签

我无法理解，app-link 自定义组件是如何渲染成a标签的，请路过的大佬讲解下

  <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)" class="qq3">
    <el-menu-item
      :index="resolvePath(onlyOneChild.path)"
      :class="{ 'submenu-title-noDropdown': !isNest }"
      
    >
      <el-icon
        v-if="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"
      >
        <component
          :is="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"
        />
      </el-icon>
      <!-- 这段是展示二级菜单的名称 -->
      <template #title>
        <span>{{ onlyOneChild.meta.title }}</span>
      </template>
    </el-menu-item>
  </app-link>

app-link=>link.vue

<template>
  <component :is="type" v-bind="linkProps(to)">
    <slot />
  </component>
</template>

<script>
import { computed, defineComponent, unref } from "vue";
import { validURL } from "@/utils/validate";

export default defineComponent({
  name: "Link",
  props: {
    to: {
      type: String,
      required: true,
    },
  },
  setup(props) {
    const isExternal = computed(() => {
      return validURL(props.to);
    });
    console.log("props.to:"+props.to)
    const type = computed(() => {
      if (unref(isExternal)) {//unref 如果参数是一个 ref，则返回内部值，否则返回参数本身。
        return "a";
      }
      return "router-link";
    });

    function linkProps(to) {
      if (unref(isExternal)) {
        return {
          href: to,
          target: "_blank",
          rel: "noopener",
        };
      }
      return {
        to: to,
      };
    }
    console.log("type:"+JSON.stringify(type.value))
    return {
      isExternal,
      type,
      linkProps,
    };
  },
});
</script>