原文地址：我的稀土掘金
介紹：
defineAsyncComponent用于拆分應用為更小的塊，并僅在需要時再從服務器加載相關組件
官網案例
<script setup>
import { defineAsyncComponent } from 'vue'
const AdminPage = defineAsyncComponent(() =>
import('./components/AdminPageComponent.vue')
)
</script>
<template>
<AdminPage />
</template>
結果展示
大致意思：無法讀取未定義的屬性
列印一下這個異步組件和普通組件的值
輸出的值區別不大
再看官網
import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() => {
return new Promise((resolve, reject) => {
// ...從服務器獲取組件
resolve(/* 獲取到的組件 */)
})
})
// ... 像使用其他一般組件一樣使用 `AsyncComp`
這種寫法是沒有問題的，但是有return 匯出該資料
最后改造
<script setup>
import { defineAsyncComponent } from 'vue'
const AdminPage = defineAsyncComponent(() =>
return import('./components/AdminPageComponent.vue')
)
</script>
<template>
<AdminPage />
</template>
結果
官網上異步組件，存在代碼疏漏，import 前需要return才會生效
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/544050.html
標籤：其他
下一篇：JS table下載