从 child 更改插槽道具

Question

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

Parent :

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

Child :

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

孙子：

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

Answer 1

使用“v-slot:default”！

Parent :

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

Child :

<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

从 child 更改插槽道具

Change slot props from child

vue.js

vue-component

vue-props

vuejs3