前提：父元件模板的內容在父元件作用域內編譯；子元件模板的內容在子元件作用域內編譯。被分發的內容會在父作用域內編譯。
一、單個插槽
//子元件模板 child-component
只有在沒有要分發的內容時才會顯示。
//父元件模板：
//父元件模板中的子元件child-component中的內容渲染到slot插槽中，
//若插槽中原有預設內容，會替換掉；
// 若子元件child-component只有乙個沒有屬性的插槽，則父元件中的所有傳入內容將被渲染在此插槽處；
// 若乙個插槽都沒有，則父元件模版中的子元件child-component中的內容會被丟棄
這是一些初始內容
這是更多的初始內容
//渲染結果：
這是一些初始內容
這是更多的初始內容
二、具名插槽
元素用屬性name來進一步配置如何分發內容。具名插槽將匹配內容片段中有對應slot特性的元素。
仍然可以有乙個匿名插槽，作為預設插槽，作為找不到匹配的內容片段的備用插槽。若無缺省插槽，這些找不到匹配的內容片段將被拋棄
//子元件模板：child-component
name="header">
//預設插槽
name="footer">
//父元件模板：
// 為匹配到的內容，插入到預設插槽中
主要內容的乙個段落。
另乙個主要段落。
slot="footer">這裡有一些聯絡資訊
child-component>
// 渲染結果為：
主要內容的乙個段落。
另乙個主要段落。
這裡有一些聯絡資訊
三、作用域插槽
v2.1.0
作用域插槽是一種特殊型別的插槽，能被傳遞資料。在子元件中，只需將資料傳遞到插槽，就可以像 props 一樣傳遞資料。
//子元件模板 child-component
在父級中，具有屬性slot-scope的元素必須存在，表示它是作用域插槽的模板。slot-scope的值將被用作乙個臨時變數名，此變數接收從子元件傳遞過來的 prop 物件：
//父元件模板
msg from parent}
//渲染成：
msg from parent
msg from child
在元件開發中，element-ui廣泛使用
demo:
//父元件模版
......其他模版**
資料：}
索引：}
姓名：}
性別：}
........其他模版**
//子元件模版 list
js:......
props:
}.....
父模版渲染後：
<ul>
<
li v-for
="(item,i) in data"
>
<
div
class
="info"
>
<
p>資料：}
p>
<
p>索引：}
p>
<
p>姓名：}
p>
<
p>性別：}
p>
div>
li>
ul>
父元件把資料listdata傳遞給子元件 data , 子元件通過作用域插槽把值傳遞給父元件scope
注意： 這裡的屬性在上面list元件呼叫的時候就會列印出乙個物件, "$index": 0 }
v2.5.0+
slot-scope能被用在任意元素或元件中而不再侷限於
//子元件模版 my-list
// 父元件模版slot="item-child"slot-scope="props"class="my-fancy-item">}
Vue之slot內容分發
內容分發，使用特殊的元素作為原始內容的插槽，假設父元件需要在子元件內讓一些dom，那麼這些dom是顯示 不顯示 在哪個地方顯示 如何顯示，就是slot分發負責的活。可以將父元件放在子元件的內容，放到想讓他顯示的地方 父元件放在子元件的內容插到了子元件的位置 將放在子元件裡的不同html標籤放在不同的...
玩轉vue的slot內容分發
單個slot 在children這個標籤裡面放dom，vue不會理你，也就是不會顯示，類似react this.props.children。父 12345 這邊不會顯示 子components 你需要寫成這樣 children 注意這邊 slot 相當於乙個坑，等著父元件給填上，這邊 slot 代...
玩轉vue的slot內容分發
單個slot 在children這個標籤裡面放dom，vue不會理你，也就是不會顯示，類似react this.props.children。父 12345 這邊不會顯示 子components 你需要寫成這樣 children 注意這邊 slot 相當於乙個坑，等著父元件給填上，這邊 slot 代...