可视区域异步加载组件

来源:6-9 music-list 组件开发(2)

行云流水justdoit

2018-06-19

// 仿京东的首页改版<主要是懒加载>  https://aotu.io/notes/2018/04/24/jdindex_2017/

// 处理加载状态的异步组件

const AsyncComponent = () => ({
 // 需要加载的组件 (应该是一个 `Promise` 对象)
 component: import('./MyComponent.vue'),
 // 异步组件加载时使用的组件
 loading: LoadingComponent,
 // 加载失败时使用的组件
 error: ErrorComponent,
 // 展示加载时组件的延时时间。默认值是 200 (毫秒)
 delay: 200,
 // 如果提供了超时时间且组件加载也超时了,
 // 则使用加载失败时使用的组件。默认值是:`Infinity`
 timeout: 3000
})

Vue.use(VueLazyload, {
 lazyComponent: true})

<lazy-component @show="handler">
 <async-component > <<async-component >

</lazy-component>

现在的问题是 AsyncComponent 这个方式,组件不知道怎么注册,似乎只能 new Vue({
 // ...
 components: {
   'my-component': AsyncComponent ()  }
}),

这个和课程无关,描述也可能很混乱,还请老师提供一个思路,谢谢!

写回答

1回答

ustbhuangyi

2018-06-20

额,实在没看懂你的问题。。

0
3
行云流水justdoit
回复
ustbhuangyi
好的,谢谢老师!
2018-06-20
共3条回复

Vue2.0高级应用教学实战,开发企业级移动端音乐Web App

Vue.js高级知识应用大集合,实战企业级APP,教你搞定组件化开发。

5432 学习 · 3804 问题

查看课程