Vue.js 带占位符的VueJs异步模板/组件

我对VueJs还很陌生，所以我还在想办法。 由于我们的模板存储在数据库中，我希望我的模板加载异步。对于我的组件，我现在使用组件工厂方法

var c = Vue.component('my-async-component', function(resolve, reject){ 
  setTimeout(function(){
    resolve({
      template: '<div class="loader">loaded asynchronous: {{ pageName }}</div>',
      data() {
        return {
          pageName: 'my Page'
        }
      }
    })
  },2000)
})

---

这在组件中是否可能？当我有一些嵌套的div时，这是否仍然有效（请参阅我的另一个问题：）

好的，我已经解决了。我只需要把里德·德维的导游做得更好一点。 我只是遵循了，现在我有了一个工作的例子

因此，我的模板如下所示：

然后在我的JS中，我声明了如下模板：

var c=Vue.component（'my-async-component'，function（）{
返回{
组件：新承诺（功能（解决、拒绝）{
//设置超时以模拟异步调用
setTimeout（函数（）{
决心({
模板：“已加载异步”
})
},3000)
}),
加载：Vue.component（'loader'{
模板：'正在加载…
'
}),
错误：Vue.component（'load-error'{
模板：“加载组件时出错”
}),
延误：200，
超时：10000
}
})
var vm=新的Vue({
el:“#应用程序”
});

加载和错误组件也可以是全局注册的组件，因此易于重用

希望我能帮助别人回答我自己的问题

var app = new Vue({
  el: '#app',
  data: {
    finish: false,
    template: null
  },
  render: function(createElement) {
    if (!this.template) {
      return createElement('div', 'loading...');
    } else {
      return this.template();
    }
  },
  mounted() {
    var self = this;
    $.post('myUrl', {foo:'bar'}, function(response){
      var tpl = response.data.template;
      self.template = Vue.compile(tpl).render;
    })
  }
})