// 父元件
<div>
    <item>
        <span>666</span>
    </item>
</div>

// item子元件
<div>
    <slot></slot>
</div>

// 此時<span>標籤就會渲染在<slot>標籤的位置

具名插槽

// 父元件
<div>
    <item>
        <span slot="one">666</span>
        <span slot="two">777</span>
    </item>
</div>

// item子元件
<div>
    <slot name="one"></slot>
    <slot name="two"></slot>
</div>

// 此時<span>標籤就會分別渲染在對應name的<slot>標籤的位置
 

作用於插槽

// 父元件
<div>
    <item>
        <span slot-scope="props">{{props.value}}</span>
    </item>
</div>

// item子元件
<div>
    <slot value="666"></slot>
</div>

//