如何访问道具或将道具传递到Vue中的子插槽

Question

如果您具有此组件层次结构，是否可以从isPanelClickable中的ComponentPanel传递或访问ComponentSomething？

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

ComponentPanel：

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

Answer 1

这可以通过scoped slots完成。 ComponentPanel可以通过将道具（例如，名为myProp）绑定到相应的<slot>元素上来将道具传递到默认位置：

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

该道具然后通过默认位置的v-slot：

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

demo