vue3异步引入组件

最新推荐文章于 2024-08-30 19:15:00 发布

汝&戏

最新推荐文章于 2024-08-30 19:15:00 发布

阅读量237

点赞数

分类专栏： vue vue3 前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_42391246/article/details/129206459

版权

前端同时被 3 个专栏收录

33 篇文章 0 订阅

订阅专栏

vue

8 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

该代码段展示了如何在Vue中使用defineAsyncComponent函数动态异步加载子组件Cp1和Cp2。模板中根据变量show控制Cp1和Cp2的显示与隐藏，点击按钮可以切换组件的显示状态。

摘要由CSDN通过智能技术生成

Cp1: defineAsyncComponent(() =>
import(‘./children/cp1.vue’)
)


<template>
  <div>
    异步引入组件
    <div v-if="show">
      <Cp1></Cp1>
      <Cp2></Cp2>
    </div>
    {{ show }}
    <button @click="show = !show">显示/隐藏组件</button>
  </div>
</template>

<script>
// import Cp1 from './children/cp1.vue'
// import Cp2 from './children/cp2.vue'
import { defineAsyncComponent } from 'vue'

export default {
  data () {
    return {
      show: false
    }
  },
  components: {
    // Cp1,
    // Cp2
    Cp1: defineAsyncComponent(() =>
      import('./children/cp1.vue')
    ),
    Cp2: defineAsyncComponent(() =>
      import('./children/cp2.vue')
    )
  }
}
</script>