最简单用法

Index.vue:

<script setup>
import { onMounted, defineAsyncComponent } from 'vue'
import './index.css'const Child = defineAsyncComponent(() => import('./Child.vue'))onMounted(() => {})
</script><template><div class="m-home-wrap"><Child> </Child><div class="m-home-demo"></div></div>
</template><style></style>

Child.vue:

<script setup>
import { onMounted } from 'vue'onMounted(() => {})
</script><template><div>child</div>
</template>

高级用法

Index.vue:

<script setup>
import { onMounted, defineAsyncComponent } from 'vue'
import LoadingComponent from './LoadingComponent.vue'
import ErrorComponent from './ErrorComponent.vue'
import './index.css'const Child = defineAsyncComponent({loader: () => import('./Child.vue'),loadingComponent: LoadingComponent, //如果200毫秒后child组件对应js文件依然没有从服务器端下载下来，则显示此组件delay: 200,errorComponent: ErrorComponent, //如果3000毫秒后child组件对应js文件依然没有从服务器端下载下来，则显示此组件timeout: 3000,
})onMounted(() => {})
</script><template><div class="m-home-wrap"><Child> </Child><div class="m-home-demo"></div></div>
</template><style></style>

Child.vue:

<script setup>
import { onMounted } from 'vue'onMounted(() => {})
</script><template><div>child</div>
</template>

LoadingComponent.vue:

<script setup>
import { onMounted, ref } from 'vue'onMounted(() => {})
</script><template><div>loading....</div>
</template>

ErrorComponent.vue:

<script setup>
import { onMounted, ref } from 'vue'onMounted(() => {})
</script><template><div>error</div>
</template>

人工智能学习网站

https://chat.xutongbao.top