动态组件
<component :is='compId'></component>
import {ref, reactive, markRaw, shallowRef} from 'vue'
import AVue from '@/view/A.vue'
import BVue from '@/view/B.vue'
const compId = shallowRef(AVue)
const data = reactive([
{
name:'A组件',
comp:markRaw(AVue)
},
{
name:'B组件',
comp:markRaw(BVue)
}
])
const switch = (item, index)=>{
compId.value = item.comp
}
插槽
子 Child.vue
<template>
<div>
<slot></slot>
</div>
<div>
<slot name='header'></slot>
</div>
<div v-for='item in data'> //往父组件传值
<slot name='main' :data='item'></slot>
</div>
<div>
<slot name='footer'></slot>
</div>
</template>
const data = reactive([
{
name:'Jason',
age:20
},
{
name:'Harry',
age:30
}
])
父:使用插槽,在父组件中给子插槽添加内容
import Dialog from '../views/Child.vue'
<Dialog>
<template v-slot> 可简写成<template #default>
<div>123</div>
</template>
<template v-slot:header> 可简写成<template #header>
<div>头部</div>
</template>
<template v-slot:main={data}> //接收子组件的传值
<div>{{data}}</div>
</template>
//动态插槽
<template #[name]>
<div>在这里</div>
</template>
</Dialog>
let name = ref('footer') //动态插入到footer插槽