官方文檔對于這一塊寫的比較不好理解,也有點繞彎子.
在這寫一點個人的理解,和使用姿勢.....

個人對內容分發(fā)<slot>的理解可以看做是 占位符、標簽替換、插槽
父組件中放入帶有slot屬性的內容，然后這些內容就會被分發(fā)到子組件中特殊的slot元素，根據name屬性在子組件中重新組合、替換。

<!--父組件-->
<div id="parent">
    <child>
        <!--等待分發(fā)的內容-->
        <p slot="one">一些內容</p>  
        <p slot="two">另外一些內容</p>
        <p>不帶slot屬性的標簽</p>
    </child>
</div>

<!--子組件-->
<div id="child">
    <slot><h1>默認替換不帶slot的元素</h1></slot>
    <slot name="one">會被替換成父組件中slot="one"的元素</slot>
    <slot name="two">會被替換成父組件中slot="two"的元素</slot>
    <p>子組件自己的標簽</p>
</div>

最后會被渲染成:
標簽的順序是根據子組件標簽的順序排列的,自行對照

<div>  
    <!--渲染后-->
    <p>不帶slot屬性的標簽</p> 
    <p>一些內容</p> 
    <p>另外一些內容</p> 
    <p>子組件自己的標簽</p>
</div>

如果父組件內沒有那個不帶slot屬于的p標簽, 則子組件內不帶name屬性的<slot>會顯示標簽內的內容,沒有標簽包裹.

<div>  
    <!--渲染后-->
    <h1>不帶slot屬性的標簽</h1>
    <p>一些內容</p> 
    <p>另外一些內容</p> 
    <p>子組件自己的標簽</p>
</div>

slot就是外部調用時會被外部替換掉，如果外部沒有內容則顯示自己的內容;

2.1.0 新增了作用域插槽

可以理解為，子組件可以將自己的數(shù)據發(fā)給父組件來處理

<!--子組件-->
<div id="child">
    <ul>
        <slot name="list" v-for="val in arr" :text="val"></slot>
    </ul>
</div>

data() { 
    return {
        arr:[1,2,3]
    } 
}

<!--父組件-->
<div id="parent">
    <Child>
       <template slot="list" scope="props">
           <li>{{ props.text + 1 }}</li>
       </template>
    </Child>
</div>

<!--最后渲染-->
<div id="child">
    <ul>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>