Vue.js 将插槽从父组件传递到子组件

我在另一个组件（）上构建了一个用户定义的组件（

async select

），如下所示：

由于最初的vue multiselect组件提供了几个插槽，我不想失去使用它们的机会。因此，我的目标是使这些插槽在我的自定义组件中可用。换言之，我想这样做：

但那个密码不起作用。 但是，如果我将插槽添加到子组件本身，它就可以正常工作（您可以从选项变为红色的事实中看到这一点）

在网上冲浪之后，我遇到了一些问题，但似乎不起作用

---

VueJS中有什么方法可以做到这一点吗？

插槽可能会令人困惑

首先，您需要一个

模板
元素来定义插槽内容：

  <async-select :value="value" :options="options">
    <template v-slot:option-tmpl="{ props }">
      <div class="ui grid">
        <div style="color: red">{{ props.option.name }}</div>
      </div>
    </template>
  </async-select>

工作小提琴：

<multiselect
    label="name"
    ref="multiselect"
    v-model="localValue"
    placeholder="My component"
    :options="options"
    :multiple="false"
    :taggable="false">
        <template slot="option" slot-scope="props">
            <slot name="option-tmpl" :props="props"></slot>
        </template>
</multiselect>