将插槽从父组件传递到子组件

【问题标题】：Passing slots through from Parent to Child Components将插槽从父组件传递到子组件
【发布时间】：2020-12-05 11:08:08
【问题描述】：

我在另一个组件 (vue mutliselect) 之上构建了一个用户定义的组件 (async-select)，如下所示：

https://jsfiddle.net/2x7n4rL6/4/

由于最初的 vue-multiselect 组件提供了几个插槽，我不想失去使用它们的机会。所以我的目标是让这些插槽在我的自定义组件中可用。换句话说，我想要这样的东西：

https://jsfiddle.net/2x7n4rL6/3/

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

https://jsfiddle.net/2x7n4rL6/1/

上网后遇到this article，但是好像不行 VueJS 有什么方法可以做到这一点吗？

【问题讨论】：

标签： vue.js

【解决方案1】：

插槽可能会令人困惑！

首先，您需要一个template 元素来定义槽内容：

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

然后，在父组件中，您需要一个slot 元素。 slot 元素本身可以在另一个 template 元素中，因此它的内容可以放在它自己的父元素的插槽中。

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

工作小提琴：https://jsfiddle.net/thebluenile/ph0s1jda/

【讨论】：