likes
comments
collection
share

【Vue3】在自定义组件中判断具名插槽的使用

作者站长头像
站长
· 阅读数 22

文章首发于:(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>

【Vue3】在自定义组件中判断具名插槽的使用

2️⃣使用默认插槽

  • 如下图:
<!-- 父组件.vue -->

<ProSlot> 
这些内容由默认由默认插槽渲染
</ProSlot>

【Vue3】在自定义组件中判断具名插槽的使用

3️⃣使用pro插槽

  • 如下图:
<!-- 父组件.vue -->

<ProSlot>
  这些内容由默认由默认插槽渲染
  <template #pro>
    这些内容将由pro插槽渲染
  </template>
</ProSlot>

【Vue3】在自定义组件中判断具名插槽的使用

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>

【Vue3】在自定义组件中判断具名插槽的使用 此时,slots只存在pro属性。

6️⃣只使用默认插槽时

  • 输出情况如下图:
<!-- 父组件.vue -->

<ProSlot>
这些内容由默认由默认插槽渲染 
</ProSlot>

【Vue3】在自定义组件中判断具名插槽的使用 此时,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】在自定义组件中判断具名插槽的使用

📜参考Vue3文档:v3.cn.vuejs.org/api/composi…

📜参考Vue3文档:单文件组件useSlots()useAttrs()

转载自:https://juejin.cn/post/7087432742236848142
评论
请登录