vue 实现动态组件
Vue 动态组件的实现方法
使用 <component> 标签
Vue 提供了内置的 <component> 标签，通过 is 属性动态切换组件：
<template>
<component :is="currentComponent"></component>
</template>
<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'
export default {
data() {
return {
currentComponent: 'ComponentA'
}
},
components: {
ComponentA,
ComponentB
}
}
</script>动态组件与 keep-alive
配合 <keep-alive> 可以缓存组件状态：
<keep-alive>
<component :is="currentComponent"></component>
</keep-alive>通过 v-if 实现
可以使用多个 v-if 条件判断来切换组件：
<template>
<ComponentA v-if="showComponentA" />
<ComponentB v-else />
</template>
<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'
export default {
data() {
return {
showComponentA: true
}
},
components: {
ComponentA,
ComponentB
}
}
</script>使用路由实现动态组件
通过 Vue Router 的命名视图实现动态组件：
const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: ComponentA,
viewB: ComponentB
}
}
]
})动态加载异步组件
使用 defineAsyncComponent 实现按需加载：
const AsyncComponent = defineAsyncComponent(() =>
import('./AsyncComponent.vue')
)组件工厂模式
通过函数式编程动态创建组件：
export default {
methods: {
getComponent(type) {
return type === 'A' ? ComponentA : ComponentB
}
}
}动态组件传参
动态组件可以像普通组件一样传递 props：
<component :is="currentComponent" :someProp="value"></component>动态组件事件监听
可以监听动态组件发出的事件：
<component :is="currentComponent" @custom-event="handleEvent"></component>以上方法可以根据具体需求选择使用，<component> 标签是最直接的动态组件实现方式，而结合 keep-alive 可以优化性能。异步组件适合大型应用的代码分割场景。
