Vue-异步组件(resolve,reject)回调

异步组件
语法：Vue.component("Name",function(resolve,reject){ }
  resolve ： 表示成功的回调;
  reject ： 表示失败的回调。

html

<div id="app">
    <tm></tm1>
    <ft></ft>
</div>

javascript

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
//---异步组件使用实例1：
    var tmp = "<div>{{msg}}</div>";
    Vue.component("tm1",function(resolve,reject){
        setTimeout(()=>{
            resolve({
                template:tmp,
                data(){
                    return {
                        msg:"hello"
                    }
                }
            })
        },2000)
    })

//---异步组件使用实例2：
    //结合 jq 的 ajax 获取另一个html数据内容 渲染
    Vue.component("ft",function(resolve){//ft 需要在 html中 调用一下
        $.ajax({//$.  --- jQ的ajax方法
            type:"get",
            url:"./footer.html",//---获取数据路径
            success(res){//ajax获取成功的时候
                console.log(res);
                resolve({//成功回调时，渲染获取的数据模板
                    template:res
                })
            }
        })
    })
</script>

footer.html 文件内容

<footer>
    <ul>
        <li>XXX</li>
        <li>QQQ</li>
        <li>LLL</li>
        <li>CCC</li>
        <li>RRR</li>
    </ul>
</footer>

渲染效果