使用 <component> ：在 Vue <script setup> 中

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 can contain either:

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>

使用 <component> ：在 Vue <script setup> 中

Using <component> :is in Vue <script setup>

vuejs3

vue-composition-api

vue-script-setup