在动态创建的 vue 实例上获取错误"Failed to mount component: template or render function not defined"

Question

我需要找到一种方法来编程创建动态组件实例（而不是通过模板）。

尽管我找到了一个解决方案（似乎），但使用new Vue(..)创建新的VUE-INSANE的幼稚方法会导致错误：

Failed to mount component: template or render function not defined。

对我来说这似乎很奇怪，因为应该这样做。即：在扩展的Vue类中定义了一个模板。

请参阅下面的代码，其中2条评论了有效的方法，而当前（未评论）代码无效。

我人为的代码：

  const HelloComponent = Vue.extend({
    template: '<p>Welcome home!</p>'
  });
  const Home1 = {
    template: '<p>Welcome home!</p>'
  };
  const Home2 = {
    extends: HelloComponent
  };
  new Vue({
    el: '#app',
    data() {
      return {
        // currentView: Home1 // does work
        // currentView: Home2 // does work
        currentView: new HelloComponent() //does NOT work. Why?
      };
    },
    template: '<component :is="currentView"></component>',
  });

Answer 1

内置的component组件可以接受字符串，组件构造函数或组件定义对象。Vue.extends创建一个新的组件构造函数。要使您的代码工作，您应该通过构造函数函数本身，而不是创建它的结果。

currentView: HelloComponent

本质上，new HelloComponent()的结果不是组件定义对象或组件构造函数函数，它是VUE实例。