什麼是插槽：
顧名思義，乙個蘿蔔乙個坑。子元件建立的標籤插入的內容不會在瀏覽器顯示。這時需要用到vue新的語法slot。
vue為什麼要用插槽：
元件標籤是元件定義好的內容，當我們想在元件標籤內放一些東西的時候。是不具有作用的。他不會顯示。
hello
vue.component('foo', )
var vm = new vue()
當我們使用插槽後
這是插槽的簡單應用。
slot的特點：
插槽的位子由元件標籤覺定。插槽的內容由父元件控制。
插槽可以寫預設內容。當子元件沒有內容的時候，就會顯示預設內容
插槽分為具名插槽和匿名插槽（單個插槽不需要寫名name）。需要多個插槽的時候需要使用具名插槽，實現一對一的操作。
具名插槽的使用：以下**我想實現的是head和body分別插入子元件的兩個插槽裡。但瀏覽器結果並不是這樣
以上說明。子元件的內容會作為一組全部插入乙個插槽中。
所以現在我們需要使用具名插槽。給每一乙個對應的標籤和插槽一一對應。這樣就實現了乙個蘿蔔乙個坑。
難點：作用域插槽（非常實用）
首先我們在子元件定義了乙個插槽。插槽的內容為遍歷乙個陣列新增到對應的標籤上（標籤是啥用父元件決定）
怎麼定義作用域插槽：
在子元件標籤中新增template模板標籤。填寫slot-scope=「***」（***為接收子元件傳遞過來的資料內容。自定義形參）
在模板標籤中填寫需要展示的標籤。
Vue 使用插槽（slot）
當父元件向子元件傳值的時候，有時候，父元件傳的並不是單純的數值 字串，有可能是帶標籤 dom 的資料，那麼如何傳值呢？如果我們像正常父向子傳值那樣操作。content hello,slot slott 子元件 class slott div div template export default s...
Vue插槽slot使用
子元件 child1 此時插槽區域內顯示文案hello 父元件 hello用途 讓內容顯示到元件內的指定位置 子元件 child1 顯示預設的插槽 會顯示v slot為content的內容 parent 預設插槽使用default做引數 哈哈哈 具名插槽使用插槽名做引數 具名插槽 用途 讓內容成為某...
vue使用插槽slot
vue中使用slot插槽 父元件 插槽的使用 父元件 父元件接受子元件的資料 child slot header 我是頭部 template footer 我是底部 template 你好我是底部元件 div slot use 子元件的內容 slotcontainder 我是子元件 div 子元件的...