vue组件动态注册和加载小记

最新推荐文章于 2024-01-30 16:50:23 发布

阿发今年二十八

最新推荐文章于 2024-01-30 16:50:23 发布

阅读量180

点赞数

分类专栏：参考资料文章标签： vue

本文链接：https://blog.csdn.net/weixin_45212940/article/details/106352376

版权

参考资料专栏收录该内容

4 篇文章 0 订阅

订阅专栏

需求

需要加载大量的组件并传递参数，组件数量不一定，一个个去impor会很繁琐且累赘
记录下参考文档及解决办法

我的组件

<template>
  <!--eslint-disable-next-line -->
  <component v-bind:is="myComponent" :option="chartOptions"/>
</template>
<script>
export default {
  props: {
    dataSource: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      chartOptions: null
    }
  },
  computed: {
    myComponent() {
      const component = require(`@/components/cppe-chart/${this.dataSource.type}.vue`).default;
      return component;
    }
  },
  created() {
    this.chartOptions = this.dataSource.options
  }
}
</script>