使用reactive或者ref创建包含组件的数据时会报错(组件不能被递归)，
shallowReactive是Vue 3中的一个函数，它用于创建一个浅响应式对象。浅响应式对象只会对对象的第一层属性进行响应式转换，而不会递归地转换嵌套对象的属性。
<template>
<div class="patient-detail">
<div class="patient-detail-tab">
<div class="patient-detail-tab-item" v-for="(item, index) in tabList" :key="index" @click="tabChange(item.value)">
{{ item.label }}
<div v-show="item.value === currentIndex" class="patient-detail-tab-item-line"></div>
</div>
</div>
<div class="patient-detail-content">
<component :is="dom[currentIndex]"></component>
</div>
</div>
</template>
<script setup>
import patientCom from './components/patientCom'
import personalOverview from './components/personalOverview'
import customerLabel from './components/customerLabel.vue'
import customerEducation from './components/customerEducation.vue'
import { ref, shallowReactive } from 'vue'
const tabList = ref([
{ label: '个人概览', value: 'personalOverview' },
{ label: '客户标签', value: 'customerLabel' },
{ label: '客户教育', value: 'customerEducation' }
])
const currentIndex = ref('personalOverview')
const tabChange = index => {
currentIndex.value = index
}
//动态组件对象
const dom = shallowReactive({
personalOverview,
customerLabel,
customerEducation
})
</script>
