setup语法糖中的component组件无效

辰辰北

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

阅读量500

点赞数 1

文章标签：前端 Vue3

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

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

版权

在Vue应用中，遇到动态组件不显示的问题，可能是因为使用了字符串来表示组件名。正确做法是使用变量来存储组件名，如`currentPage`，并确保在`scriptsetup`中引入和引用组件，例如`Home`和`About`，通过`shallowRef`创建可变引用，然后在模板中使用`:is`指令结合变量来动态渲染组件。

摘要由CSDN通过智能技术生成

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

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

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

<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>