Vue 动态组件模板不适用于 promise

Question

<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 import components dynamically

控制台抛出错误“this.loader() 不是函数”或“this.loader().then”不是函数。

Answer 1

不确定为什么会看到该错误，因为 loader 明确定义为 returns 函数的计算道具。

然而，created 钩子似乎调用了 loader() 两次（第二次调用是不必要的）。这可以简化：

export default {
  created() {
    // Option 1
    this.loader().then(res => this.myComponent = res)

    // Option 2
    this.myComponent = () => this.loader()
  }
}

demo 1

更简单的方法是将 loader 重命名为 myComponent，去掉 myComponent 数据属性:

export default {
  //data() {
  //  return {
  //    myComponent: '',
  //  };
  //},

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

demo 2

Vue 动态组件模板不适用于 promise

Vue dynamic component template not working for promise

vue.js

vue-dynamic-components