vue.js - Vue3 检查插槽是否为空

Question

是否有 Vue3 等效于以下 Vue2 方法:

methods: {
   hasSlot(name) {
      return !!this.$slots[name]
   }
}

在 Vue3 的 Composition API 中？
我试过了:

setup({slots}) {
   const hasSlot = (name) => {
      return !!slots[name];
   }

   return { hasSlot }

}

但它没有返回预期值 slots未定义(控制台中的每个错误)。

Answer 1

正如 comments 中所指出的, setup() 's second argument ( context )包含组件的 slots .第一个参数是组件的 props .

export default {
  setup(props, { slots }) {
    const hasSlot = name => !!slots[name]
    return { hasSlot }
  }
}

demo 1
这些插槽也在模板中公开为 $slots ，所以你可以替换 hasSlot(slotName)与 $slots[slotName]或只是 $slots.SLOTNAME (例如， $slots.footer ):

<template>
  <footer v-if="$slots.footer">
    <h3>footer heading</h3>
    <slot name="footer" />
  </footer>
</template>

demo 2