slot插槽分发无法向组件传递内容，需指定slot属性值；

Question

参考iview组件写法的时候发现的一个问题；
slot插槽分发无法向组件传递内容，需指定slot属性值；

已知；
子组件；

<template>
    <div>
      <slot name="input"></slot>
      <slot></slot>
    </div>
</template>

父组件；//t-slot 为子组件

<template>
    <t-slot>   
      <slot name="input">123</slot>
      <slot >456</slot>
    </t-slot>
</template>

这样是可以正常显示123456;
问题；

<template>
<div
    :class="classes"
    v-click-outside.capture="onClickOutside"
    v-click-outside:mousedown.capture="onClickOutside"
>
    <div
        ref="reference"

        :class="selectionCls"
        :tabindex="selectTabindex"

        @blur="toggleHeaderFocus"
        @focus="toggleHeaderFocus"

        @click="toggleMenu"
        @keydown.esc="handleKeydown"
        @keydown.enter="handleKeydown"
        @keydown.up.prevent="handleKeydown"
        @keydown.down.prevent="handleKeydown"
        @keydown.tab="handleKeydown"
        @keydown.delete="handleKeydown"


        @mouseenter="hasMouseHoverHead = true"
        @mouseleave="hasMouseHoverHead = false"

    >
        <slot name="input">
            <input type="hidden" :name="name" :value="publicValue">
            <select-head
                :filterable="filterable"
                :multiple="multiple"
                :values="values"
                :clearable="canBeCleared"
                :disabled="disabled"
                :remote="remote"
                :input-element-id="elementId"
                :initial-label="initialLabel"
                :placeholder="placeholder"
                :query-prop="query"

                @on-query-change="onQueryChange"
                @on-input-focus="isFocused = true"
                @on-input-blur="isFocused = false"
                @on-clear="clearSingleSelect"
            />
        </slot>
    </div>
    <transition name="transition-drop">
        <Drop
            :class="dropdownCls"
            v-show="dropVisible"
            :placement="placement"
            ref="dropdown"
            :data-transfer="transfer"
            v-transfer-dom
        >
            <ul v-show="showNotFoundLabel" :class="[prefixCls + '-not-found']"><li>{{ localeNotFoundText }}</li></ul>
            <ul :class="prefixCls + '-dropdown-list'">
                <functional-options
                    v-if="(!remote) || (remote && !loading)"
                    :options="selectOptions"
                    :slot-update-hook="updateSlotOptions"
                    :slot-options="slotOptions"
                ></functional-options>
            </ul>
            <ul v-show="loading" :class="[prefixCls + '-loading']">{{ localeLoadingText }}</ul>
        </Drop>
    </transition>
</div>
</template>

iview select组件；地址：https://github.com/iview/ivie...
问题：
其中的slot name='input'

<Select><slot name='input'>123</slot></Select>

// 这样不能展示；需加上属性

<Select><slot name='input'><div slot='input'></div>123</slot></Select>

Answer 1

你把你例子中的

<template>
    <div>
      <slot name="input"></slot>
      <slot></slot>
    </div>
</template>

改为

<template>
    <div>
      <slot name="input"></slot>
    </div>
</template>

同样不能显示. 你在例子问题太大了. 我来剖析一下.

父组件:

<template>
    <t-slot>   
      <slot name="input">123</slot>
      <slot >456</slot>
    </t-slot>
</template>

本质是

<template>
    <t-slot>   
      X
    </t-slot>
</template>

这个 X 会作为 default slot 传递给 t-slot. 所以能显示完全是因为你 t-slot 内的 <slot></slot>, 和 <slot name="input"></slot> 一点关系没有.