无法使用 VueJS 加载组件

Question

我正在尝试使用动态导入组件，但没有任何反应。

这是我的代码：

<component :is="state.name"/>
<button @click="onClick">Click me !</button>

setup() {
  const state = reactive({
  name: computed(() => isShow.value == true ? import('./b.vue'): import('./a.vue'))
  });

  const isShow = ref(false);
  const onClick = () => {
    console.log(5)
    isShow.value = true;
  }

  return {
    state,
    onClick
  }
},

这是我的 b & a 组件

<template>
  <div>
    b
  </div>
</template>

<script>
export default {
    data(){},
    created(){
        alert('lol')
    }
}
</script> 

请我需要帮助以编程方式加载我的组件

Answer 1

您可以使用defineAsyncComponent ：请sandbox with example

<template>
  <div class="hello">
    <component :is="state" />
    <button @click="onClick">Click me !</button>
  </div>
</template>

<script>
import { ref, computed, defineAsyncComponent } from "vue";
export default {
  setup() {
    const isShow = ref(false);
    const state = computed(() =>
      isShow.value
        ? defineAsyncComponent(() => import("./a.vue"))
        : defineAsyncComponent(() => import("./b.vue"))
    );
    const onClick = () => {
      isShow.value = !isShow.value;
    };
    return {
      state,
      onClick,
    };
  },
};
</script>