異步組件Async-Comp.js，

注意，Async-Comp.js并沒有在index.html中引用，而是在下面的main.js中動(dòng)態(tài)加載。

window.async_comp = {
 template: '\
  
\
   {{ item }}\
  
',
 props: {
  list: Array
 }
};

main.js

var vm = new Vue( {
 el: '#app',
 components: {
  /* 異步組件async-comp */
  'async-comp': function () {
   return {
    /** 要渲染的異步組件，必須是一個(gè)Promise對(duì)象 */
    component: new Promise( function ( resolve, reject ) {
     var script = document.createElement( 'script' );
     script.type = 'text/javascript';
     script.src = '/Async-Comp.js';
     document.head.appendChild( script );
     script.onerror = function () {
      reject( 'load failed!' );
     }

     script.onload = function () {
      if ( typeof async_comp !== 'undefined' )
       resolve( async_comp );
      else reject( 'load failed!' )
     }
    } ),
    /* 加載過程中顯示的組件 */
    loading: {
     template: '
loading...
'
    },
    /* 出現(xiàn)錯(cuò)誤時(shí)顯示的組件 */
    error: {
     template: '\
      load failed!
\
     '
    },
    /* loading組件的延遲時(shí)間 */
    delay: 10,
    /* 最長等待時(shí)間，如果超過此時(shí)間，將顯示error組件。 */
    timeout:3200
   }
  }
 }
} )

看完上述內(nèi)容，你們對(duì)Vue中怎么實(shí)現(xiàn)一個(gè)異步組件有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。