如何在 vue 中访问或将道具传递给子插槽

Question

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

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

组件面板：

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

Answer 1

这可以通过scoped slot实现。 ComponentPanel可以通过在相应的<slot>元素上绑定 prop（例如，名为myProp ）将 prop 传递给默认插槽：

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

然后该道具通过默认插槽中的v-slot传递：

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