Question

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

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

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

当我尝试将 multiple 作为道具传递给插槽时。我无法在 vb-option

中收听/观看

vb-option

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

props:{
  multiple:Boolean,
},

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

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

插槽作用域不会自动应用于您放入插槽内的组件的 props - 您需要如上所示明确传递它。

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

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

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

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

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

1 个答案: