异步组件

最新推荐文章于 2022-03-09 20:11:29 发布

weixin_44889992

最新推荐文章于 2022-03-09 20:11:29 发布

阅读量184

点赞数

分类专栏： vue 文章标签：异步组件

本文链接：https://blog.csdn.net/weixin_44889992/article/details/89597916

版权

vue 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

异步组件

异步组件也是一个函数，只不过这个函数使用Promise,函数有一个返回值

<body>
     <div id="app">
          <async-com></async-com>
    </div>
</body>
<script>
var result = new Promise(function( resolve, reject ){
           resolve({
              template: '<div> 异步组件 </div>'
         })
})
Vue.component('AsyncCom',async () => {
              const tpl = await result.then( res => res)
              return tpl
         })
// Vue.component('async-com', function (resolve, reject) {
// setTimeout(function () {
// // 向 `resolve` 回调传递组件定义
// resolve({
// template: '<div>I am async!</div>'
// })
// }, 1000)
// })
     new Vue({
       el: '#app'
   })
</script>

异步组件的封装

const asyncCom = {
createAsyncCom({
    selector,
    asyncComName,
    methods,
    data,
    watch,
    computed,
    filters,
    directives,
    components,
    delay}){
var result = new Promise(function( resolve, reject ){
resolve({
    template: selector,
    methods,
    data,
    watch,
    computed,
    filters,
    directives,
    components
     })
})
setTimeout(()=>{
Vue.component(asyncComName,async () => {
        const tpl = await result.then( res => res)
        return tpl
     })
},delay)
       }
}
export default {
createAsyncCom: asyncCom.createAsyncCom
}