vueルータを使用しない変数からVueテンプレートをレンダリングするさまざまな方法

Question

現在Vue JSを使用していますが、私はルータを使用していません。私はスタンドアローンのビルドを使用していないし、webpackで実装し、.vue拡張子で使用したいと考えています。変数を使用してVueテンプレートをレンダリングするより良い方法を探しています。例：

// App.Vue 
var Loading = { 
    template: `<div>Loading...</div>` 
} 

// main.js 
var currentView = Loading; 

new Vue({ 
    el: "#app", 
    render(h) { 
    return h(currentView); 
    } 
}); 

上記の例は問題なく完全に正常に動作します。より良い対処方法があるかどうかを理解したいと思います。

はcurrentViewは、その機能をレンダリングするために渡される前に、どのように我々はテンプレートに値を置き換えることができます

currentView = "Loading" 

render(h) { 
    return h(eval(currentView)); // works 
    return h([currentView]); // template not found or mount error 
} 

のような文字列が含まれている場合のは、言ってみましょうか？

ありがとうございます。

Answer 1

hは、VueのcreateElementは仮想Dom要素を作成するために使用されます。実際のDom要素を作成するために使用するブラウザのcreateElementと同じです。だから、それは仮想のDomではなく、文字列で動作します。 2番目の例を使用する場合は、「Loading」という名前のコンポーネントを登録する必要があります。

var Loading = { 
    template: `<div>Loading...</div>` 
} 

// main.js 
var currentView = "Loading"; 

new Vue({ 
    el: "#app", 
    render(h) { 
    return h(currentView); 
    }, 
    components: { 
    Loading: Loading //register Loading component as "Loading" 
    } 
}); 

またはグローバルロードコンポーネントとして登録

Vue.component("Loading", Loading);