【Vue3】如何在自定义组件的在<script setup>中判断使用了那些具名插槽？？【✨/05/20更新✨】
🌏业务场景介绍：
有时候我们自定义的组件中有会多个插槽，每个插槽有一个值唯一的
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️⃣使用该组件，默认情况下如图所示：
<!-- 父组件.vue --><ProSlot> </ProSlot>
2️⃣使用默认插槽
如下图：<!-- 父组件.vue --><ProSlot> 这些内容由默认由默认插槽渲染</ProSlot>
3️⃣使用pro插槽
如下图：<!-- 父组件.vue --><ProSlot>这些内容由默认由默认插槽渲染<template #pro>这些内容将由pro插槽渲染</template></ProSlot>
4️⃣如何获取组件实例
【✨/05/20 更新slots获取方法、示例代码✨】
在vue3中我们可以通过调用getCurrentInstance()方法来获取内部组件实例，但是它并不能当做this的代替方案,因为getCurrentInstance只能在 setup 或生命周期钩子中调用。
在组件内部获取的实例上挂载了slots属性，该属性收集了当前组件已经被使用的插槽name，根据该特点可以我们灵活地应对需求。
使用getCurrentInstance获取组件内部实例：
通过一种更优雅的方式，在<script setup>中使用slots，请看代码实例：
<!-- ProSlot.vue --><script lang="ts" setup>// - import { onMounted, ComponentInternalInstance, getCurrentInstance } from 'vue'- const { slots } = getCurrentInstance() as ComponentInternalInstance+ import { useSlots } from 'vue'+ const slots = useSlots()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插槽时
输出情况如下图：<!-- 父组件.vue --><ProSlot><template #pro>这些内容将由pro插槽渲染</template></ProSlot>
此时，slots只存在pro属性。
6️⃣只使用默认插槽时
输出情况如下图：<!-- 父组件.vue --><ProSlot>这些内容由默认由默认插槽渲染 </ProSlot>
此时，slots只存在default属性。
🚀🌲🌏🛸⚗️根据以上实验，可以了解到，通过获取组件内部实例上挂载的
slots即可判断该组件的哪些插槽被使用了。
7️⃣完整示例代码：
【✨/05/20 更新示例代码✨】
自定义ProSlot.vue组件:
<!-- ProSlot.vue --><script lang="ts" setup>// - import { onMounted, ComponentInternalInstance, getCurrentInstance } from 'vue'- const { slots } = getCurrentInstance() as ComponentInternalInstance+ import { useSlots } from 'vue'+ const slots = useSlots()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组件：
<!-- 父组件.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>
输出结果如下图：
📜参考Vue3文档：https://v3./api/composition-api.html#getcurrentinstance
📜参考Vue3文档：单文件组件useSlots()和useAttrs()
