如何动态加载异步组件?

需求是这样的,
定义了某组件,通过接收一个参数(组件名)来动态加载相关子组件.
但官方在动态组件文档里的例子是在确定已有组件情况下.
可我的组件是未知的情况如何操作?因为我不可能先把所有组件一个个引用进去.

<template>
  <component :is="name"></component>
</template>
<script>
export default {
  props: ['name'],
  components: {
    // 这里的子组件是动态的还不确定,不能写死,也许是A、B或者C
  }
}
</script>

根据 @tsanie 的回答解决:

<template>
  <component :is="comp"></component>
</template>
<script>
export default {
  data () {
    return {
      compName: this.name
    }
  },
  computed: {
    comp: function () {
      console.log(this.compName)
      return require(`./${this.compName}`)
    }
  },
  props: ['name']
}
</script>

回答:

componentis参数不仅仅接收String,还可以是ComponentDefinition或者ComponentConstructor

参考这个


补充示例

回答:

貌似v-if就是做这个的..

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注