vue中的插槽怎麼用？看這篇就夠了

1. 兩個元件

元件b:

元件a:

現在元件a的效果：

2、現在修改元件a和元件b的內容

我是a元件的內容，我叫小a

現在來看看元件a的效果：

3、看看發生了什麼變化

「我是a元件的內容，我叫小a」這段內容被分發到了元件b的容器，其實這就是插槽。現在再來看看官方的解釋：vue 實現了一套內容分發的 api，這套 api 的設計靈感源自 web components 規範草案，將元素作為承載分發內容的出口。

後備內容很簡單，但很有用

b元件改造：

小b

a元件：

小a

當元件a中，不寫「小a」時，後備內容小b就會顯示

自 2.6.0 起有所更新

改造元件b:

相應的元件a：

我是頭部我是內容我是尾部

具名插槽就是有名字的插槽，當有多個插槽時以作區分。

跟 v-on 和 v-bind 一樣，v-slot 也有縮寫，即把引數之前的所有內容 (v-slot:) 替換為字元 #。例如 v-slot:header 可以被重寫為 #header：，前提是必須要有插槽名！！！

注意 v-slot 只能新增在 < template > 上，只有當被提供的內容只有預設插槽時，元件的標籤才可以被當作插槽的模板來使用。這樣我們就可以把 v-slot 直接用在元件

目的：讓插槽內容能夠訪問引用的元件中才有的資料

元件 b:

元件b繫結了乙個自身的user屬性，並將user.lastname當作後備內容

元件a:

}-->
}

繫結在 < slot > 元素上的特性被稱為插槽 prop，即slotprops,這個名字可以隨便起，現在展示的內容便是元件b中的user.firstname的了

以上便是插槽的基本用法，想看更多其他用法，還是去刷遍官網咖：