方式一：
<template>
<button @click="handleClick">點擊異步加載組件</button>
<component :is="currentTabComponent"></component>
</template>
<script>
import { defineAsyncComponent, shallowRef } from "vue";
export default {
setup() {
const currentTabComponent = shallowRef(null);
const handleClick = () => {
currentTabComponent.value = defineAsyncComponent(() => import("./components/AsyncComponent.vue"));
};
return {
handleClick,
currentTabComponent,
};
},
};
</script>
方式二：
<template>
<button @click="handleClick">點擊異步加載組件</button>
<AsyncComponent v-if="show" />
</template>
<script>
import { defineAsyncComponent, ref, shallowRef } from "vue";
export default {
components: {
AsyncComponent: defineAsyncComponent(() => import("./components/AsyncComponent.vue")),
},
setup() {
const show = ref(false);
const handleClick = () => {
show.value = true;
};
return {
handleClick,
show,
};
},
};
</script>
點擊加載按鈕前如下圖：
加載前.png
點擊加載按鈕后如下圖：
加載后.png
