vue3中使用keepalive和component

vue3和vue2中有些差异，直接上代码：

  <KeepAlive include="aComponent"><component :is='compList[active]'@goDetail="goDetail"@back="back" /></KeepAlive>  
<script setup lang="ts">
/*** 将事件从报告图表中抛上来，传递具体数据*/
import { ref ,markRaw} from 'vue'
import aComponent from './Acomponent.vue'
import bcomponent from './Bcomponent.vue'const dataDownConfig = ref(null);
const active = ref('aComponent');
const compList = ref({aComponent: markRaw(aComponent ),bComponent: markRaw(bComponent )
})
// 通过切换active的值来切换组件
const goDetail = (data: any) => {active.value = 'aComponent '
}
const back = () => {active.value = 'bcomponent '
}
</script>      

// Acomponent.vue (给组件加名字)

<script lang="ts" setup>
defineOptions({name: 'aComponent '
})
</script>