Question

我对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)
})

但加载时是否有可能有某种占位符？我知道我可以做些什么但在这种情况下我需要有一个父组件，我希望这是独立的。

在一个Vue实例上，你可以在渲染功能结束时将它挂起来安装如下：

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

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

Answer 1

好的，我明白了。我只需要reed de VUE指南更好一点。我只是跟着advanced async example from the docs，现在我有一个有效的例子。

所以我有这样的模板：

<div id="app">
  <my-async-component></my-async-component>
</div>

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

var c = Vue.component('my-async-component', function(){
  return {
    component: new Promise(function(resolve, reject){
      // setTimeout to simulate an asynchronous call
      setTimeout(function(){ 
        resolve({
          template: '<div class="loader">loaded asynchronous</div>'
        })
      },3000)
    }),
    loading: Vue.component('loader', {
      template: '<p>loading...</p>'
    }),
    error: Vue.component('load-error', {
      template: '<p>error loading component</p>'
    }),
    delay: 200,
    timeout: 10000
  }
})

var vm = new Vue({
  el: '#app'
});

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

希望我可以帮助某人回答我自己的问题。

VueJs异步模板/组件与占位符

1 个答案: