【Vue3】在自定义组件中判断具名插槽的使用
文章首发于:(CSDN @一只彩乌鸦 blog.csdn.net/weixin_4352…)
【Vue3】如何在自定义组件的在 <script setup>
中判断使用了那些具名插槽??【✨2022/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️⃣如何获取组件实例
【✨2022/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️⃣完整示例代码:
【✨2022/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文档:v3.cn.vuejs.org/api/composi…
📜参考Vue3文档:单文件组件useSlots()
和useAttrs()
转载自:https://juejin.cn/post/7087432742236848142