vue3 <script setup> 可以使用component is，如何让它工作？

Question

我是vue3新手，发现vue有三种写组件的方式：

<脚本设置>
normal-setup/composition api
选项api。

我知道如何在正常构图中使用 api 像这样：

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

确实有效。

但我尝试使用安装脚本，但失败了：


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

Answer 1

您需要使用导入的名称：

<script setup>
  import CommonLayout from "@/components/Layout/CommonLayout.vue";
</script>
<template>
  <CommonLayout />
</template>

或动态：

<script setup>
  import CommonLayout from "@/components/Layout/CommonLayout.vue";
</script>
<template>
   <component :is="CommonLayout" />
</template>

或者您可以使用别名

<script setup>
  import { CommonLayout as Layout } from '@/components/Layout/CommonLayout.vue';
</script>
<template>
   <component :is="Layout" />
</template>

vue3 <script setup> 可以使用component is，如何让它工作？

Could vue3 <script setup> use component is, how to make it work?

javascript

vue.js

vuejs3