vuejs / rfcs

RFCs for substantial changes / feature additions to Vue core
4.87k stars 548 forks source link

[FEAT] Required slots #535

Closed Hulkmaster closed 1 year ago

Hulkmaster commented 1 year ago

What problem does this feature solve?

I have component with optional/required slots

i want parent component to explicitly show that

"Child component requires named slot 'body'"

What does the proposed API look like?

child.vue

<template>
  <div class="child-header">
    <slot name="header" required />
  </div>
  <div class="child-body">
    <slot name="body" required />
  </div>
  <slot />
</template>

parent.vue

<template>
  <child>
    <template #header>
      i am header
    </template>

    <div>
      i am default optional slot, i might be missing, or i might be optional named slot
    </div>
  </child>
</template>

ERROR: "Child.vue" requires named "body" slot

Shyam-Chen commented 1 year ago
<script lang="ts" setup>
defineSlots<{
  header: () => any,
  body: () => any,
}>();
</script>