vue官方文件在slot這部分講解的並不是很詳細，這裡用更通俗的語言進行描述。
根據官檔的標題來開始吧
假如父元件的**如下（children為註冊的子元件）：
這裡是插槽的內容，位於子元件內部
渲染結果：
這裡是子元件，注意：沒有加入slot標籤哦！
上面的**實際效果如下：
這裡是父元件
這裡是子元件，注意：沒有假如slot標籤哦！
是不是少了東西，對，children中標籤內容沒有渲染出來，why?
這裡我們就要用到插槽了，插槽（slot）是用來將父元件中新增在子元件標籤中的內容（這裡指children中）插入到子元件中，使其能夠渲染出來的的工具。
如果能理解那麼我們繼續，不理解也得往下看
現在對上面的**進行修改
這裡是插槽的內容，位於子元件內部
渲染結果：
這裡是插槽的內容，位於子元件內部
這裡是子元件，注意：這裡加入slot標籤哦！
可以看到，子元件中slot標籤被渲染為<
div>
這裡是插槽的內容，位於子元件內部
div>
上面的**實際效果如下：
這裡是父元件
這裡是插槽的內容，位於子元件內部
這裡是子元件，注意：沒有假如slot標籤哦！
可以看到，內容被渲染出來了，所以，slot用法很簡單，只要在子元件中加入標籤，那麼父元件裡新增到子元件標籤中所有的內容都會取代區域。
注意哦，是所有內容，比如我們在新增些內容：
<
divid
=''>
<
div>這裡是父元件
div>
<
children
>
<
div>header
div>
<
div>main
div>
<
div>footer
div>
children
>
div>
<
script
>
newvue( }
})<
/script
>
所有我們在子元件標籤中新增的內容都會被渲染出來：
這裡是父元件
header
main
footer
具名插槽更能說明它為啥叫插槽，比如我們修改一下上面的例子，我們想要將三個div插入到三個不同的位置：
<
divid
=''>
<
div>這裡是父元件
div>
<
children
>
<
divslot
='header
'>header
div>
<
divslot
='main
'>main
div>
<
divslot
='footer
'>footer
div>
children
>
div>
<
script
>
newvue( }
})<
/script
>
渲染結果如下：
這裡是父元件
header
main
footer
這裡是子元件，注意：3個slot標籤哦！
為父元件中插入的dom元素新增slot='slotname'，為子元件中的slot標籤新增name='slotname'，這樣就可以一一對應的將內容新增到指定位置，就像各種硬體的介面只能接特定的接頭一樣，接頭和介面缺少任何乙個都不能順利的連線，所以那兩個屬性乙個都不能少。當然，對於文字節點和沒有新增slot='slotname'的元素，還想要的話就新增乙個通用介面將它們全部接收吧。
Vue slot 插槽的使用
slot插槽作為分發內容的出口 假設看這篇文章的你已經有了一定的vue元件基礎 let btn vue.component btn template 1 上述 建立了乙個名為btn的全域性元件。接下來我們在其他頁面中呼叫這個外掛程式 let vm new vue template 得到的頁面效果如下...
Vue slot插槽的使用
lang en charset utf 8 插槽title head slot slot1 up value data title up slot slot2 down value book v for book in books down shouhe div src script src scr...
vue slot插槽的使用
slot插槽的使用場景 父元件向子元件傳遞dom時會用到插槽 作用域插槽 當同乙個子元件想要在不同的父元件裡展示不同的狀態，可以使用作用域插槽。展示的狀態由父元件來決定 注 想要修改父元件向子元件傳遞的元素的樣式時，只能在對應的子元件進行修改 1.具名插槽的使用 父元件 slot header 我是...