在没有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 
}

我们如何在将值传递给render函数之前将其替换为模板？

提前致谢。

Answer 1

h是Vue的createElement用于创建虚拟Dom元素。 与用于创建实际Dom元素的浏览器的createElement相同。 因此，它仅适用于虚拟Dom而不适用于字符串。 如果要第二个示例工作，则必须注册一个名为“ 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);