Vue3动态组件&异步组件用法及说明

<template>
  <div>
    <!-- 切换按钮 -->
    <button @click="currentComp = CompA">组件A</button>
    <button @click="currentComp = CompB">组件B</button>
    <button @click="currentComp = CompC">组件C</button>
    <!-- 动态组件核心标签 -->
    <component :is="currentComp"></component>
  </div>
</template>
<script setup>
import { ref } from 'vue'
// 导入需要切换的组件
import CompA from './CompA.vue'
import CompB from './CompB.vue'
import CompC from './CompC.vue'
// 绑定组件对象（响应式）
const currentComp = ref(CompA) // 默认渲染 CompA
</script>

// main.js 全局注册组件
import { createApp } from 'vue'
import App from './App.vue'
import CompA from './CompA.vue'

const app = createApp(App)
app.component('CompA', CompA) // 全局注册
app.mount('#app')

<template>
  <component :is="currentCompName"></component>
</template>

<script setup>
import { ref } from 'vue'
const currentCompName = ref('CompA') // 绑定全局组件名称
</script>

<template>
  <div>
    <button @click="currentComp = CompA">组件A</button>
    <button @click="currentComp = CompB">组件B</button>

    <!-- KeepAlive 缓存组件，切换后输入框内容不丢失 -->
    <KeepAlive>
      <component :is="currentComp"></component>
    </KeepAlive>
  </div>
</template>

<!-- CompA.vue 示例（带输入框） -->
<template>
    <input v-model="inputVal" placeholder="组件A输入内容" />
</template>
<script setup>
import { ref } from 'vue'
const inputVal = ref('') // 状态会被 KeepAlive 保留
</script>

<template>
  <component
    :is="currentComp"
    :msg="parentMsg"
    @change="handleCompChange"
  ></component>
</template>

<script setup>
import { ref } from 'vue'
import CompA from './CompA.vue'

const currentComp = ref(CompA)
const parentMsg = ref('父组件传递的消息')

const handleCompChange = (val) => {
  console.log('子组件触发的事件：', val)
}
</script>

<template>
  <component :is="currentComp"></component>
</template>

<script setup>
import { ref, defineAsyncComponent } from 'vue'

// 异步加载组件（切换时才加载代码）
const CompA = defineAsyncComponent(() => import('./CompA.vue'))
const CompB = defineAsyncComponent(() => import('./CompB.vue'))

const currentComp = ref(CompA)
</script>

<script setup>
import { ref, defineAsyncComponent } from 'vue'
import Loading from './Loading.vue'
import Error from './Error.vue'

// 配置异步组件的加载/错误状态
const CompA = defineAsyncComponent({
  loader: () => import('./CompA.vue'),
  loadingComponent: Loading, // 加载中显示
  errorComponent: Error,     // 加载失败显示
  delay: 200,                // 延迟显示加载组件（避免闪屏）
  timeout: 3000              // 超时时间
})

const currentComp = ref(CompA)
</script>

<!-- CompA.vue -->
<script setup>
import { onActivated, onDeactivated } from 'vue'

onActivated(() => {
  console.log('CompA 被激活（显示）')
})

onDeactivated(() => {
  console.log('CompA 被失活（隐藏）')
})
</script>

<template>
  <!-- 像普通组件一样使用异步组件 -->
  <AsyncComp />
</template>

<script setup>
import { defineAsyncComponent } from 'vue'

// 定义异步组件（最简写法）
const AsyncComp = defineAsyncComponent(() => {
  // import() 动态导入组件，返回 Promise
  return import('./AsyncComp.vue')
})
</script>

<template>
  <AsyncComp />
</template>

<script setup>
import { defineAsyncComponent } from 'vue'
// 导入加载/错误兜底组件
import LoadingComp from './LoadingComp.vue'
import ErrorComp from './ErrorComp.vue'

// 完整配置的异步组件
const AsyncComp = defineAsyncComponent({
  // 1. 核心：加载函数（返回 Promise）
  loader: () => import('./AsyncComp.vue'),

  // 2. 加载中显示的组件（可选）
  loadingComponent: LoadingComp,
  // 延迟显示加载组件（避免闪屏，默认 200ms）
  delay: 200,

  // 3. 加载失败显示的组件（可选）
  errorComponent: ErrorComp,
  // 加载失败的重试逻辑（可选）
  onError: (err, retry, fail, attempts) => {
    // err：错误信息
    // retry：重试加载的函数
    // fail：终止加载的函数
    // attempts：已重试次数
    if (attempts < 3) {
      // 重试 3 次
      setTimeout(retry, 1000)
    } else {
      // 超过 3 次则失败
      fail()
    }
  },

  // 4. 超时时间（可选，毫秒）
  timeout: 5000, // 5 秒加载不完成则触发失败
})
</script>

<template>
  <button @click="currentComp = AsyncTab1">标签1</button>
  <button @click="currentComp = AsyncTab2">标签2</button>
  
  <component :is="currentComp"></component>
</template>

<script setup>
import { ref, defineAsyncComponent } from 'vue'

// 定义多个异步组件
const AsyncTab1 = defineAsyncComponent(() => import('./Tab1.vue'))
const AsyncTab2 = defineAsyncComponent(() => import('./Tab2.vue'))

const currentComp = ref(AsyncTab1)
</script>

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import { defineAsyncComponent } from 'vue'
import Loading from '@/components/Loading.vue'

// 路由懒加载（方式1：最简）
const Home = () => import('@/views/Home.vue')

// 路由懒加载（方式2：带配置）
const About = defineAsyncComponent({
  loader: () => import('@/views/About.vue'),
  loadingComponent: Loading,
  delay: 100
})

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

export default router

<template>
  <button @click="showModal = true">打开弹窗</button>
  <!-- 弹窗显示时才加载组件 -->
  <AsyncModal v-if="showModal" @close="showModal = false" />
</template>

<script setup>
import { ref, defineAsyncComponent } from 'vue'

const showModal = ref(false)
// 弹窗组件仅在需要时加载
const AsyncModal = defineAsyncComponent(() => import('./Modal.vue'))
</script>

function defineAsyncComponent(options) {
  return {
    setup() {
      const state = ref('loading') // loading/success/error
      const component = ref(null)
      
      // 执行加载
      options.loader()
        .then(comp => {
          component.value = comp.default
          state.value = 'success'
        })
        .catch(() => state.value = 'error')
      
      return { state, component }
    },
    render() {
      if (this.state === 'loading') return h(options.loadingComponent)
      if (this.state === 'error') return h(options.errorComponent)
      return h(this.component)
    }
  }
}