Vue中怎么实现一个异步组件-古蔺大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

Vue中怎么实现一个异步组件

今天就跟大家聊聊有关Vue中怎么实现一个异步组件，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

成都创新互联公司坚持“要么做到，要么别承诺”的工作理念，服务领域包括：网站设计、成都网站制作、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的桥东网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

兴城网站制作公司哪家好，找创新互联建站！从网页设计、网站建设、微信开发、APP开发、响应式网站建设等网站项目制作，到程序开发，运营维护。创新互联建站从2013年开始到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联建站。

index.html



 
  
  
  
  Document

异步组件Async-Comp.js，

注意，Async-Comp.js并没有在index.html中引用，而是在下面的main.js中动态加载。

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

main.js

var vm = new Vue( {
 el: '#app',
 components: {
  /* 异步组件async-comp */
  'async-comp': function () {
   return {
    /** 要渲染的异步组件，必须是一个Promise对象 */
    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...'
    },
    /* 出现错误时显示的组件 */
    error: {
     template: '\
      load failed!\
     '
    },
    /* loading组件的延迟时间 */
    delay: 10,
    /* 最长等待时间，如果超过此时间，将显示error组件。 */
    timeout:3200
   }
  }
 }
} )

看完上述内容，你们对Vue中怎么实现一个异步组件有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。

本文名称：Vue中怎么实现一个异步组件
转载来于：http://scgulin.cn/article/igcpps.html

新闻中心

其他资讯