Soy un nuevo principiante de vue3 y descubrí que vue tiene tres formas de escribir el componente:
Sé cómo usar en una API de composición normal como esta:
<script> import CommonLayout from "@/components/Layout/CommonLayout.vue"; export default { components: { CommonLayout, }, setup() { const layout = "CommonLayout"; return { layout }; }, }; </script> <template> <div> {{ layout }} <component :is="layout">123</component> </div> </template>realmente funciona.
pero trato de usar el script de configuración, falló:
<script setup> import CommonLayout from "@/components/Layout/CommonLayout.vue"; const layout = "CommonLayout"; </script> <template> <div> {{ layout }} <component :is="layout">123</component> </div> </template> <style></style>Necesitas usar el nombre importado:
<script setup> import CommonLayout from "@/components/Layout/CommonLayout.vue"; </script> <template> <CommonLayout /> </template>o dinámicamente:
<script setup> import CommonLayout from "@/components/Layout/CommonLayout.vue"; </script> <template> <component :is="CommonLayout" /> </template>o puedes usar alias
<script setup> import { CommonLayout as Layout } from '@/components/Layout/CommonLayout.vue'; </script> <template> <component :is="Layout" /> </template>