0
<template>
  <component :is="myComponent" />
</template>

<script>
export default {
  props: {
    component: String,
  },

  data() {
    return {
      myComponent: '',
    };
  },

  computed: {
    loader() {
      return () => import(`../components/${this.component}`);
    },
  },

  created() {
    this.loader().then(res => {
      // components can be defined as a function that returns a promise;
      this.myComponent = () => this.loader();
    },
  },
}
</script>

参照:

https://medium.com/scrumpy/dynamic-component-templates-with-vue-js-d9236ab183bb

Vue jsはコンポーネントを動的にインポートします

コンソールは、「this.loader() is not a function」または「this.loader().then」は関数ではありませんというエラーをスローします。

4

1 に答える 1