在 <component> Vue 中使用 ：is<脚本设置>

Question

我想要一个按钮在点击时在两个视图之间切换。代码为：

<template>
<button @click="switchSheet">{{ currentSheet }}</button>
<component :is="sheetView" :key="componentKey" />
</template>
<script setup>
import DisplaySheetClassrooms from "./components/ds-classrooms.vue";
import DisplaySheetChromebooks from "./components/ds-chromebooks.vue";
let sheetView = DisplaySheetClassrooms;
let currentSheet = ref("HS Classrooms");
const switchSheet = () => {
if (sheetView == DisplaySheetClassrooms) {
sheetView = DisplaySheetChromebooks;
currentSheet.value = "HS Chromebooks";
} else {
sheetView = DisplaySheetClassrooms;
currentSheet.value = "HS Classrooms";
}
};

文件状态

"：is可以包含以下任一项：

the name string of a registered component, OR
the actual imported component object"

我使用的是实际导入的组件，但查看Devtools switchView时从未更改值。我也试过用字符串引号，但仍然没有效果。我在这里尝试了解决方案，但对我不起作用。有人能澄清一下如何让它起作用吗。提前谢谢。

Answer 1

这似乎对我有用：

使用组件对象，并使用组件名称密钥(在您的情况下为sheetView(来针对component :is值中的密钥

示例：

<template>
<button @click="switchSheet">{{ currentSheet }}</button>
<component :is="components[currentSheet]" :key="currentSheet" />
</template>
<script setup>
import DisplaySheetClassrooms from "./components/ds-classrooms.vue";
import DisplaySheetChromebooks from "./components/ds-chromebooks.vue";
let currentSheet = ref("DisplaySheetChromebooks");
// create an object key (doesn't need to be a ref)
const components = {
DisplaySheetChromebooks,
DisplaySheetClassrooms,
}
const switchSheet = () => {
if (currentSheet === "DisplaySheetClassrooms) {
currentSheet = "DisplaySheetChromebooks";
} else {
currentSheet = "DisplaySheetClassrooms";
}
};
</script>