Vue3 学习笔记 —— 异步组件

• App.vue

<template>
  <!-- 当异步组件还未展示时用于显示备选组件 -->
  <Suspense>
  	<!-- 默认显示 -->
    <template #default>
      <AsyncComponent/>
    </template>
    <!-- 加载时显示
		v-slot: 可以简写为 #
	 -->
    <template v-slot:fallback>
      <h1>Loading</h1>
    </template>

  </Suspense>
</template>

<script lang="ts">
	import { defineComponent, defineAsyncComponent} from 'vue';
	// 引入异步组件
	const AsyncComponent = defineAsyncComponent(()=>import('./components/AsyncComponent.vue'))
	export default defineComponent({
	  components: { AsyncComponent },
	  name: 'App'
	});
</script>

• AsyncComponent.vue

<!-- 内容不重要 -->
<template>
  asyncComponent 內容
</template>

<script>
	import {defineComponent} from 'vue'
	
	export default defineComponent({
	    name: 'asyncComponent'
	})
</script>