大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

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中怎么实现一个异步组件
当前URL:http://dzwzjz.com/article/igcpps.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP