动态组件在 Vue3 中不显示任何内容？

Question

我在我的项目中有一个动态组件，可以是"Login"或";RegisterForm"

但是它不显示任何东西。

<script setup lang="ts">
import { ref } from "vue";
import RegisterForm from '@/components/Layout/Navbar/Register.vue'
import Login from '@/components/Layout/Navbar/Login.vue'

let activeComponent = ref('Login')
</script>
<template>
<button @click="activeComponent='RegisterForm'">change to register</button>
<component :is="activeComponent" />
</template>

我该如何解决这个问题?

Answer 1

我不确定这是否是在组合API中编写的最佳方式，但这可以在没有任何错误/警告的情况下工作。

<script setup>
import { shallowRef } from "vue";
import CompA from "@/components/CompA.vue";
import CompB from "@/components/CompB.vue";
const activeComponent = shallowRef(CompA);
</script>
<template>
<button @click="activeComponent = CompB">toggle to Component B</button>
<component :is="activeComponent" />
</template>