从孩子更改插槽道具

【问题标题】：Change slot props from child从孩子更改插槽道具
【发布时间】：2021-09-23 21:33:03
【问题描述】：

在 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>

【问题讨论】：

标签： vue.js vue-component vuejs3 vue-props

【解决方案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

【讨论】：