vue官方文件中關於slot插槽的說明很簡短，語言又寫的很凝練,這就有可能造成初次接觸插槽的開發者容易產生「算了吧，回頭再學，反正已經可以寫基礎元件了」的想法，於是就關閉了vue的說明文件。
q: 假如父元件需要在子元件內放一些dom元素，那麼這些dom是顯示呢還是不顯示呢？
預設情況下是不會顯示的，如下圖所示，頁面並沒有顯示父元件增加的我是魔鬼 元素內容。那麼我執意要加dom元素到子元件上該怎麼實現呢？這就用到了slot插槽，使用slot這個標籤可以將父元件放在子元件的內容，放到它想顯示的地方
通俗易懂的講，slot具有「佔坑」的作用，在子元件佔好了位置，那父元件使用該子元件標籤時，新新增的dom元素就會自動填到這個坑裡面
我們將上面的**改一改 , 給child元件新增slot插槽，那麼父元件的新增的dom元素就填充到這個slot插槽裡面了
注意：如果有多個dom元素，會一起插入到這個標籤內
現在我們需要將父元件新增的html標籤放在子元件裡的不同位置。具名插槽實現：先在子元件對應分發slot標籤裡，新增name=」name名」 屬性，其次父元件在要分發的標籤裡新增 slot=」name名」 屬性，然後就會將對應的標籤放在對應的位置了。
簡單理解就是：給子元件佔的每乙個坑取名，將父元件新增的html元素新增到指定名字的坑，就實現了分發內容在不同位置顯示
【child元件模板】
我是header
我是footer
父元件模板的內容在父元件作用域內編譯；子元件模板的內容在子元件作用域內編譯
【child元件模板】
【父元件引用child元件】
我是header
我是footer
在子元件中插槽中通過：data繫結了資料，父元件可以通過slot-scope="name"來取得子元件作用域插槽：data繫結的資料，name的名稱可以隨便取，用來定義物件來代替取到的data資料。
【child元件模板】
【父元件引用child元件】
}
} 我是插槽
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 子元件的...