VUE动态引入并注册子组件

VUE动态引入并注册子组件

// An highlighted block
<template>
  <div>
    <component :is="item.location" v-for="(item,index) in simulateData" :key="index" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      simulateData: [
        { location: "TestComA" },
        { location: "TestComB" },
        { location: "TestComC" },
      ],
    };
  },

  created() {
    this.simulateData.map((el) => {
      this.$options.components[el.location] = () => import('@/components/testComponents/' + el.location + '.vue');
    });
  },
};
</script>

simulateData用来模拟传递过来的子组件路径的参数。
通过options来自定义 property ，通过代码this.$options.components[el.location] = () => import(’@/components/testComponents/’ + el.location + ‘.vue’);来进行子组件的引入并注册。