動的に作成されたvueインスタンスで「コンポーネントのマウントに失敗しました：テンプレートまたはレンダリング関数が定義されていません」

Question

動的コンポーネントインスタンスを（テンプレートではなく）プログラムで作成する方法を見つける必要があります。

私は解決策（それはそう）、単にエラーでnew Vue(..)結果を使用して、新しいVUE-インスタンスを作成する素朴な方法を発見したものの：

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のインスタンスの、コンポーネント定義オブジェクトまたはコンポーネントコンストラクタ関数ではありません。