slot父组件向子组件插槽
1.匿名
<template>
<div>
<slot></slot>
</div>
</template>
父组件在引入组件的地方加上v-slot
<template>
<div>
<test-slot>
<template v-slot>
<div>插槽</div>
</template>
</test-slot>
</div>
</template>
<script>
import TestSlot from './TestSlot.vue'
export default {
components:{ TestSlot}
}
</script>
这样在父组件的子组件就会显示插槽中的内容了
2.具名
具名顾名思义就是给插槽定义name 实现自由插入
<template>
<div>
<slot name="first"></slot>
<slot name="second"></slot>
</div>
</template>
父组件使用#name引入
<template>
<div>
<test-slot>
<template #first>
<div>我是插槽first</div>
</template>
<template #second>
<div>我是插槽second</div>
</template>
</test-slot>
</div>
</template>
<script>
import TestSlotfrom './TestSlot.vue'
export default {
components:{ TestSlot}
}
</script>
3.作用域插槽
使用子组件传来的信息进行插槽
<template>
<div>
<div>hello world</div>
<!-- ⼦组件中告诉⽗组件,要实现obj⾥的信息 -->
<slot :info="info"></slot>
</div>
</template>
<script>
import { reactive } from "vue";
export default {
data(){
return{
objInfo:{
title:'我是匿名插槽',
msg:'我是msg'
}
}
}
}
</script>
<template>
<div>
<test-slot>
<template v-slot="slotProps" >
<div>{{slotProps.info}}</div>
<div>{{slotProps.info.title}}</div>
</template>
</test-slot>
</div>
</template>
<script>
import TestSlot from './TestSlot.vue'
export default {
components:{ TestSlot}
}
</script>
这样就成功了