const MyLoadingComponent = Vue.extend({
  template: '#my-loading',
});

new Vue({
  el: '#app',
  dữ liệu() {
    trở lại {
      items: [],
    };
  },
  components: {
    'my-component': loadComponentWithLoading,
  },
  methods: {
    addItem() {
      this.items.push(Math.random());
    },
  },
});

// https://v2.vuejs.org/v2/guide/components-dynamic-async.html#Handling-Loading-State
function loadComponentWithLoading() {
  trở lại {
    component: loadComponent(),
    loading: MyLoadingComponent,
  };
}

// https://v2.vuejs.org/v2/guide/components-dynamic-async.html#Async-Components
function loadComponent() {
  return new Promise(function(resolve, reject) {
    loadComponentHtml().then((html) => {
      resolve(Vue.extend({
        // https://v2.vuejs.org/v2/api/#template
        template: html,
      }));
    });
  });
}

function loadComponentHtml() {
  return new Promise(function(resolve, reject) {
    thiết lập thời gian chờ(() => {
      resolve(``);
    }, 2000);
  });
}

.myItem {
  color: green;
}

.myLoading {
  font-style: italic;
  color: red;
}

  Add some list items
  

    

      {{item}}