vue3 在子组件怎么知道父组件都用了自己什么插槽？

Question

在vue2中我知道是$scopedSlots，那vue3呢？

vue2 获取父组件夹杂了什么插槽_vue 怎么判断父组件使用了插槽-CSDN博客 文章浏览阅读868次。在子组件打印一下：mounted(){ console.log(this); },说明用到了两个插槽：left和columns_vue 怎么判断父组件使用了插槽 https://blog.csdn.net/qq_42618566/article/details/122231343

Answer 1

引自免费微信小程序：皆我百晓生

在Vue 3中，你可以使用 $slots 属性来获取父组件中使用的插槽。这个属性提供了一个对象，包含了父组件模板中定义的具名插槽以及默认插槽。

以下是一个示例，展示了如何使用 $slots 来获取父组件使用的插槽：

// 子组件中
<template>
  <div>
    <!-- 默认插槽 -->
    <slot></slot>

    <!-- 具名插槽 -->
    <slot name="header"></slot>
    <slot name="footer"></slot>
  </div>
</template>

<script>
export default {
  mounted() {
    // 访问父组件中使用的插槽
    console.log(this.$slots);

    // 访问具名插槽
    console.log(this.$slots.header);
    console.log(this.$slots.footer);
  }
}
</script>

当父组件使用插槽时，Vue 3会将插槽内容传递给子组件，并存储在 $slots 对象中。你可以直接通过 $slots 来访问这些插槽，并进行相应的处理。

希望这能解决你的问题！如果你还有其他问题，请随时提问。