Vue3自定义组件中如何判断使用了那些具名插槽？？
🌏业务场景介绍：
有时候我们自定义的组件中有会多个插槽，每个插槽有一个值唯一的
name属性，这种插槽称之为具名插槽。当在父组件中使用
具名插槽时，与具名插槽的name属性相对应的template中的内容将会替换该插槽的位置。那么，在
自定义组件中，我们如何才能知道，在父组件中到底使用了该组件的哪些插槽了呢??请看下文详细介绍!!👇
- 0??首先准备一个自定义组件
<!-- ProSlot.vue -->
<script lang="ts" setup>
</script>
<template>
<div class="slot">
<slot>这是默认插槽</slot>
<br/>
<slot name="pro">这是pro插槽</slot>
</div>
</template>
<style lang="scss" scoped>
.slot {
margin: 0 auto;
width: 200px;
height: 100px;
border: 5px solid skyblue;
background-color: pink;
}
</style>
- 1??使用该组件，默认情况下如图所示：
<ProSlot> </ProSlot>
- 2??使用默认插槽，如下图：
<ProSlot>
这些内容由默认由默认插槽渲染
</ProSlot>
- 3??使用pro插槽，如下图：
<ProSlot>
这些内容由默认由默认插槽渲染
<template #pro>
这些内容将由pro插槽渲染
</template>
</ProSlot>
- 4??在vue3中我们可以通过调用
getCurrentInstance()方法来获取内部组件实例，但是它并不能当做this的代替方案,因为getCurrentInstance只能在 setup 或生命周期钩子中调用。 - 在组件内部获取的实例上挂载了
slots属性，该属性收集了当前组件已经被使用的插槽name，根据该特点可以我们灵活地应对需求。 - 使用
getCurrentInstance获取组件内部实例：
<!-- ProSlot.vue -->
<script lang="ts" setup>
//
import { onMounted, ComponentInternalInstance, getCurrentInstance } from 'vue'
const { slots } = getCurrentInstance() as ComponentInternalInstance
onMounted(() => {
console.log(slots);
})
</script>
<template>
<div class="slot">
<slot>这是默认插槽</slot>
<br/>
<slot name="pro">这是pro插槽</slot>
</div>
</template>
<style lang="scss" scoped>
.slot {
margin: 0 auto;
width: 400px;
height: 100px;
border: 5px solid skyblue;
background-color: pink;
}
</style>
- 5??只使用
pro插槽时，输出情况如下图：
<ProSlot>
<template #pro>
这些内容将由pro插槽渲染
</template>
</ProSlot>
此时，slots只存在pro属性。
- 6??只使用
默认插槽时，输出情况如下图：
<ProSlot>
这些内容由默认由默认插槽渲染
</ProSlot>
此时，slots只存在default属性。
🚀🌲🌏🛸?? 根据以上实验，可以了解到，通过获取组件内部实例上挂载的
slots即可判断该组件的哪些插槽被使用了。
下面是完整示例:
- 7??自定义
ProSlot.vue组件：
<!-- ProSlot.vue -->
<script lang="ts" setup>
//
import { onMounted, ComponentInternalInstance, getCurrentInstance } from 'vue'
const { slots } = getCurrentInstance() as ComponentInternalInstance
onMounted(() => {
console.log(slots);
if(slots?.default) {
console.log('使用了默认插槽');
}
if(slots?.pro) {
console.log('使用了pro插槽');
}
})
</script>
<template>
<div class="slot">
<slot>这是默认插槽</slot>
<br/>
<slot name="pro">这是pro插槽</slot>
</div>
</template>
<style lang="scss" scoped>
.slot {
margin: 0 auto;
width: 400px;
height: 100px;
border: 5px solid skyblue;
background-color: pink;
}
</style>
- 在父组件中使用
ProSlot.vue组件：
<script lang="ts" setup>
import ProSlot from '@/components/ProSlot.vue'
</script>
<template>
<ProSlot>
这些内容由默认由默认插槽渲染
<template #pro>
这些内容将由pro插槽渲染
</template>
</ProSlot>
</template>
<style lang="scss" scoped>
</style>
- 输出结果如下图：
📜参考：https://v3.cn.vuejs.org/api/composition-api.html#getcurrentinstance
