setup语法糖中的component组件无效

辰辰北

已于 2023-06-03 23:13:47 修改

阅读量383

点赞数 1

文章标签：前端 Vue3

于 2023-06-03 22:59:08 首次发布

本文链接：https://blog.csdn.net/weixin_42943920/article/details/131026772

版权

问题描述：
动态组件命明明写好了，我这怎么就不展示？比如下面这个，我觉得自己写得非常稳当！！
在这里插入图片描述

解决办法：
明明写好了，跟你有什么关系，你又没写好。那怎么办呢，
参考下面这个栗子🌰：
在这里插入图片描述

将所有**组件的名字**用**变量**表示，别用字符串，举个🌰如下：

<template>
  <div class="app">
    <p>App</p>
    <button @click="currentPage = Home">home</button>
    <button @click="currentPage = About">about</button>
    <component :is="currentPage"></component>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import About from './views/About.vue'
import Home from './views/Home.vue'
let currentPage = shallowRef(Home)
</script>