小编mrc*_*yog的帖子

我正在学习 Vue 并尝试使用组件标签学习动态渲染。这段代码有什么问题？控制台中没有显示任何错误，但单击按钮仍然不显示所需的组件。它确实可以与 v-if 一起使用，但我接下来的讲座的重点是使用组件动态渲染。哪个不起作用：

<template>
  <div>
    <the-header></the-header>
    <button @click="setSelectedComponent('active-goals')">Active goals</button>
    <button @click="setSelectedComponent('manage-goals')">Manage goals</button>
    <component :is="selectedTab"></component>
  </div>
</template>

<script setup>
/* eslint-disable no-unused-vars */
import { ref, defineExpose, defineComponent } from 'vue';
import TheHeader from './components/TheHeader.vue';
import ActiveGoals from './components/ActiveGoals.vue';
import ManageGoals from './components/ManageGoals.vue';

const selectedTab = ref('active-goals');
const setSelectedComponent = (tab) => {
  selectedTab.value = tab;
};

defineExpose({
  selectedTab,
  setSelectedComponent,
});

defineComponent({
  components: {
    TheHeader,
    ActiveGoals,
    ManageGoals,
  },
});
</script>

<style>
html {
  font-family: sans-serif;
}

body {
  margin: …