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元素。与浏览器的createElement相同，后者用于创建真正的Dom元素。所以它只适用于虚拟Dom而不是字符串。如果您希望第二个示例正常工作，则必须注册名为“正在加载”的组件。

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);

不使用vue路由器从变量渲染Vue模板的不同方法

1 个答案: