How to access or pass props to child slot in vue

Question

If you have this component hierarchy, is it possible to pass or access isPanelClickable from ComponentPanel in ComponentSomething ?

<ComponentA>
  <ComponentPanel :isPanelClickable="false">
    <ComponentSomething />
  </ComponentPanel>
</ComponentA>

ComponentPanel:

<template>
  <div class="panel">
    <slot /> <!-- Can I "use" 'isPanelClickable' here somehow..? -->
  </div>
</template>

Answer 1

This is possible through scoped slots . ComponentPanel could pass a prop to the default slot by binding the prop (eg, named myProp ) on the corresponding <slot> element:

<template>
  <slot :myProp="isPanelClickable ? 'I am clickable' : 'I do nothing'" />
</template>

That prop is then passed through the v-slot in the default slot:

<ComponentPanel>
  <template v-slot="{ myProp }">
    <ComponentSomething :foo="myProp" />
  </template>
</ComponentPanel>

demo