异步组件是什么
- 因为异步路由的存在，所以使用异步组件的次数比较少，大型应用中，需要分割应用为更小的块，并且在需要组件时再加载它们；
- 不仅可以在路由切换时懒加载组件，还可以在页面组件中继续使用异步组件，从而实现更细的分割粒度；
- 异步组件的函数不仅可以返回一个 Promise，还支持返回一个对象；
vue2 中异步组件的使用
HTML
HTML
<script>
// 第一种：使用工厂函数的方式定义组件，这个工厂函数会异步定义组件，在组件需要渲染时才进行加载；
// 1. 定义组件
const AsyncComponent = ()=>({
// 异步加载的组件
component: import(/*webpackChunkName:'async'*/"./components/MyComponent.vue"),
// loading状态中显示的组件
loading: LoadingComponent,
// 加载失败显示的组件
error: ErrorComponent,
// 加载组件时的延迟时间，默认值为 200ms
delay: 200,
// 加载组件超时时间，超时后默认使用 error 组件
timeout: 3000
});
// 2. 注册组件
export default {
components: {
AsyncComponent
}
}
</script>
<!-- 3. 使用组件 -->
<tempalte>
<AsyncComponent v-if='show'><AsyncComponent>
<el-button @click="show = !show">点击</el-button>
</tempalte>
<tempalte>
<Parent v-if="show"></Parent>
<button @click='handleShow'>出现</button>
</tempalte>
<script>
export default {
data() {
return {
show: false,
}
},
components: {
// 第二种动态引入，将这个包命名为 async，为了更好的辨识
Parent: () => import(/*webpackChunkName: 'async'*/'./chuancan/parent')
},
methods: {
handleShow() {
console.log("出现了");
this.show = true;
}
}
}
</script>
vue3 中异步组件的使用
在 Vue3 中，异步组件的 API 有所改进，可以直接使用 defineAsyncComponent 函数来定义异步组件；
打赏作者
您的打赏是我前进的动力
微信
支付宝
vue2.x✍️ 组件定义与使用
上一篇
评论
