从孩子更改插槽道具

Question

在 Vue JS 中，如何将组件作为另一个组件的 prop（或插槽）传递，同时能够从孙组件设置它自己的 props？

家长：

<template>
  <Child>
    <SomeComponent />
  </Child>
</template>

孩子 ：

<template>
  <GrandChild>
    <slot></slot>
  </GrandChild>
</template>

孙子：

<template>
  <slot :content="content"></slot> //Setting the props of <SomeComponent/> here
</template>

Answer 1

使用“v-slot:default”！

家长：

<template>
  <Child>
    <template v-slot:default="slotProps">
      <SomeComponent :content="slotProps.content"/>
    </template>
  </Child>
</template>

孩子 ：

<template>
  <GrandChild>
    <template v-slot:default="slotProps">
        <slot :content="slotProps.content"></slot>
    </template>
  </GrandChild>
</template>

孙子：

<template>
  <slot :content="content"></slot>
</template>

我建议您参考此文档。

https://v3.vuejs.org/guide/component-slots.html#scoped-slots