异步组件一般用于组件不想立马加载
当我们点击一个按钮的时候,进行显示子组件的内容。一般情况下我们这样使用。
asyncComp.vue
<template>
<div class="asyncComp">
<!-- 异步组件使用 -->
<button @click="btnClick">按钮</button>
<div v-if="show">
<List/>
</div>
</div>
</template>
<script>
import List from './comp/list.vue'
export default {
name:"asyncComp",
components: {
List
},
data() {
return {
show:false
}
},
methods: {
btnClick(){
this.show = !this.show
}
}
}
</script>
<style lang="scss" scoped>
.asyncComp {
}
</style>
list.vue
<template>
<div class="list">
异步组件内容
</div>
</template>
<script>
export default {
name:"list",
}
</script>
list组件的代码是下载好的,在我们点击切换的时候,不会再进行下载。
异步组件:
使用方式如同路由懒加载。
组件在切换的时候进行加载。
<template>
<div class="asyncComp">
<!-- 异步组件使用 -->
<button @click="btnClick">按钮</button>
<div v-if="show">
<List/>
</div>
</div>
</template>
<script>
export default {
name: "asyncComp",
data() {
return {
show: false
}
},
methods: {
btnClick() {
this.show = !this.show
}
},
components: {
List: () => import(/*webpackChunkName:"list"*/ './comp/list') //使用webpack的import方法
},
}
</script>
点击的时候查看控制台会发现多了list文件。