vue3插槽的介紹 保證讓你看看的明明白白!

2022-10-10 21:54:14 字數 1224 閱讀 3954

插槽

當元件中只有乙個插槽的時候,我們可以不設定 slot 的 name 屬性。

v-slot 後可以不帶引數,但是 v-slot 在沒有設定 name 屬性的時候,

插槽口會預設為「default」。

插槽主要是在封裝元件的時候去使用

注意點:v-slot 只能新增在 上哈。

第一種插槽(匿名插槽)
現在我們封裝乙個元件,在元件中可以自定義內容。

這個時候我們就可以使用插槽了。

插槽可以將父頁面中的內容展示在子元件中指定的位置。

父頁面
匿名插槽新增的資料 

子元件

解釋

子當元件渲染的時候, 將會被替換為「匿名插槽新增的資料 」。

插槽還可以包含任何模板**,包括 html,或者其他元件。

第二種插槽(具名插槽)以及插槽簡寫
很多的時候,我們可能在元件的不同位置展示不同的內容。

這個時候我們就需要使用具名插槽。

跟 v-on 和 v-bind 一樣,v-slot 也有縮寫。

(v-slot:) 替換為字元 #

例如 v-slot:header 可以被重寫為 #header:

具名插槽的使用

子元件

第三種插槽(作用域插槽)

有時讓插槽內容能夠訪問子元件中才有的資料是很有用的。

當乙個元件被用來渲染乙個專案陣列時,這是乙個常見的情況,

我們希望能夠自定義每個專案的渲染方式。

作用域插槽的使用
父元件.vue

子元件

vue3 插槽作用域的使用

當我們在父元件定義了乙個陣列,data 想把它傳到子元件處理後 props 通過插槽的方式再傳送回父元件 template v for item,index in names key item slot slot template 在父元件對子元件中處理過的資料進行使用時,比如說我們想要在父元件想使...

vue3安裝 你期待已久的Vue 3 正式發布啦

vue.js 3.0 one piece 已正式發布,此框架新的主要版本提供了更好的效能 更小的 包體積 更好的 typescript 整合 用於處理大規模用例的新 api,並為框架未來的長期迭代奠定了堅實的基礎。3.0 版本的開發周期長達兩年多,期間產生了 30 rfcs 2600 commits...

vue插槽樣式 Vue的插槽的簡單介紹以及示例

vue插槽的概念 vue的插槽,是一種內容分發機制,但是我感覺它更加像元件的一種佔位符的概念,通過插槽,等待元件外部傳入複雜的內容。使用插槽的好處 在以前的例子中todo item插槽直接寫在了todo list插槽中,其實是比較不合理的,它會導致todo list插槽比較死板,無法重用更多的其他元...