Vue，组件标签，动态组件注入

zbdgwd5y 于 2023-10-23 发布在 Vue.js

关注(0)|答案(1)|浏览(114)

在下面的代码中，如果retrieveComponent('test')返回undefined，那么标记的附加内容是什么（关于性能）？使用v-if条件可能是更好的解决方案？

<script setup lang="ts">
import {defineAsyncComponent} from "vue/dist/vue";

function retrieveComponent(componentName){
  let module = undefined;
  try {
    module = defineAsyncComponent(() => import((`../components/modules/${componentName}/${componentName}Component.vue`)));
  }catch (e){ }
  return module;
}
</script>

<template>
  <component :is="retrieveComponent('test')" style="display: block"/>
</template>

vue.js

来源：https://stackoverflow.com/questions/77157803/vue-component-tag-dynamic-component-injection

1条答案

按热度按时间

kzipqqlq1#

在这种情况下，我会添加一个errorComponent，请参阅https://vuejs.org/guide/components/async.html#loading-and-error-states。

const AsyncComp = defineAsyncComponent({
  // the loader function
  loader: () => import('./Foo.vue'),

  // A component to use while the async component is loading
  loadingComponent: LoadingComponent,
  // Delay before showing the loading component. Default: 200ms.
  delay: 200,

  // A component to use if the load fails
  errorComponent: ErrorComponent,
  // The error component will be displayed if a timeout is
  // provided and exceeded. Default: Infinity.
  timeout: 3000
})

从“vue/dist/vue”导入也是错误的吗？

赞(0）回复(0）举报 2023-10-23

我来回答

Vue，组件标签，动态组件注入

1条答案

相关问题

热门标签

最新问答