我是 vue3 的新手，發現 vue 有三種寫組件的方式：
- <腳本設定>
- 正常設定/組合 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>
uj5u.com熱心網友回復：
您需要使用匯入的名稱：
<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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/473062.html