码迷,mamicode.com
首页 > 其他好文 > 详细

Vue异步组件Demo

时间:2018-11-14 22:44:39      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:nload   error:   rom   javascrip   加载   efi   hub   reject   .net   

Vue异步组件Demo

在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载。为了进一步简化,Vue.js 允许将组件定义为一个工厂函数,异步地解析组件的定义。Vue.js 只在组件需要渲染时触发工厂函数,并且把结果缓存起来,用于后面的再次渲染。

下面是我写的一个简单Vue异步组件Demo。

index.html


<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
            content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible"
            content="ie=edge">
        <title>Document</title>
        <script>
            // 如果浏览器不支持Promise就加载promise-polyfill
            if ( typeof Promise === 'undefined' ) {
                var script = document.createElement( 'script' );
                script.type = 'text/javascript';
                script.src = 'https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js';
                document.head.appendChild( script );
            }
        </script>
        <!-- 引入Vue -->
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>

    <body>
        <div id="app" style="font-size: 22px">
            <!-- 异步组件async-comp -->
            <async-comp :list="['我是一个异步组件,','如果加载完成,','我就会在这里显示']"></async-comp>
        </div>

        <!-- 引入main.js     -->
        <script src="/main.js"></script>
    </body>

</html>

异步组件Async-Comp.js,

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

window.async_comp = {
    template: '        <ol>            <li v-for="item in list">{{ item }}</li>        </ol>',
    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: '<p>loading...</p>'
                },
                /* 出现错误时显示的组件  */
                error: {
                    template: '                        <p style="color:red;">load failed!</p>                    '
                },
                /* loading组件的延迟时间 */
                delay: 10,
                /* 最长等待时间,如果超过此时间,将显示error组件。 */
                timeout:3200
            }
        }
    }
} )

see github

原文地址:https://segmentfault.com/a/1190000012561857

Vue异步组件Demo

标签:nload   error:   rom   javascrip   加载   efi   hub   reject   .net   

原文地址:https://www.cnblogs.com/lalalagq/p/9960394.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!