如何将道具传递给插槽，Vue 3

【问题标题】：How to pass props to slot, Vue 3如何将道具传递给插槽，Vue 3
【发布时间】：2021-07-27 16:31:34
【问题描述】：

制作自定义选择框组件。但是当我尝试传递到插槽时遇到了一些麻烦。

<vb-select v-model="container"
           title="bla bla"
           multiple>
  <vb-option v-for="(item, idx) in items" :key="idx" :value="item">{{item}}</vb-option>
</vb-select>

vb-option 是插槽，我在vb-select 组件中调用它。

vb-选择

<ul v-if="state" class="vb-options">
   <slot :state="state" :multiple="multiple"></slot>
</ul>

当我尝试将multiple 作为道具传递给插槽时。我无法在vb-option 中收听/观看它

vb 选项

<li class="vb-option">
   {{multiple}}
</li>

props:{
  multiple:Boolean,
},

实现这一目标的正确方法是什么？观察槽内的道具是否有变化。

【问题讨论】：

标签： vuejs3

【解决方案1】：

<slot :state="state" :multiple="multiple"></slot>

您在这里所做的是使用 scoped slots - 但它们的工作方式与您尝试使用它们的方式不同。

试试这个方法：

<vb-select>
  <template #default="scope"> <!-- you can also do #default="{ state, multiple }" -->
    <vb-option :multiple="scope.multiple" />
  </template>
</vb-select>

插槽范围不会自动应用于您放入插槽中的组件的道具 - 您需要如上所示显式传递它。

这就是“槽作用域的工作原理”部分，但第二部分是您正在尝试实现一种称为“复合组件”的东西，这比 Vue 中的要复杂一些。在 React 中，您需要使用 React Context，但在 Vue 中，您需要使用提供/注入。

这是一个 repo，我在其中概述了一些用例，包括一个选择/选项： https://github.com/sethidden/vue-compound-components

如果这太疯狂了，那么做这样的事情并在 vb-select 本身中处理选项渲染确实没有错：

<vb-select :options="[{ value: '123', label: 'Hello' }, { value: '567', label: 'Helloooo' }]" />

【讨论】：