vue.js - Vue动态组件模板不适用于承诺

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 动态导入组件

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

Answer 1

不知道为什么您会看到该错误，因为loader它被明确定义为返回函数的计算道具。

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

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

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

演示 1

更简单的是用 重命名loader，myComponent去掉myComponentdata 属性：

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

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

演示 2