Slot slot distribution cannot deliver content to the component, so you need to specify the value of the slot attribute.

A problem found when referring to the writing of the iview component;
slot slot distribution cannot deliver content to the component, so you need to specify the slot attribute value;

known;
subcomponents;

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

parent component; / / t-slot is a child component

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

this can display 123456;
questions;

<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 component; address: https://github.com/iview/ivie.
question:
where slot name="input"

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

/ / this cannot be displayed; you need to add an attribute

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






















Aug.19,2021

you put

in your example
<template>
    <div>
      <slot name="input"></slot>
      <slot></slot>
    </div>
</template>
Change

to

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

cannot be displayed either. You have too much problem in the example. Let me analyze it.

parent component:

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

is essentially

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

this X is passed to t-slot as default slot . So it can be displayed entirely because the < slot > < / slot > in your t-slot has nothing to do with < slot name= "input" > < / slot > .

Menu