Vue中slot的使用(通俗易懂)

2021-08-25 05:40:44 字數 1201 閱讀 6545

個人理解:

是對元件的擴充套件,通過slot插槽向元件內部指定位置傳遞內容,通過slot可以父子傳參;

開發背景(slot出現時為了解決什麼問題):

正常情況下,hello world

在元件標籤child中的span標籤會被元件模板template內容替換掉,當想讓元件標籤child中內容傳遞給元件時需要使用slot插槽;

slot的通俗理解

是「佔坑」,在元件模板中佔好了位置,當使用該元件標籤時候,元件標籤裡面的內容就會自動填坑(替換元件模板中位置),當插槽也就是坑有命名時,元件標籤中使用屬性slot=」myslot」的元素就會替換該對應位置內容;

slot使用

1、元件中有單個或多個未命名slot標籤時,如下:

hello world

這是在slot上新增了樣式

這是擁有命名的slot的預設內容

會輸出:兩個紅色的hello world,以及乙個使用slot的預設內容

注意:在slot標籤新增樣式無效。擁有命名的插槽不能被不含slot屬性的標籤內容替換,會顯示slot的預設值(具名slot具有對應性);

2、元件中有多個命名的slot插槽時,可以實現父元件對子元件的指定位置顯示內容或傳參,如下:

hello world

hello world

hello world

} 這是擁有命名的slot的預設內容

這是擁有命名的slot的預設內容

這是擁有命名的slot的預設內容

這是擁有命名的slot的預設內容

3、作用域插槽!!:

使用時候子元件標籤中要有標籤,再通過scopename.childprop就可以呼叫子元件模板中的childprop繫結的資料,所以作用域插槽是一種子傳父傳參的方式,解決了普通slot在parent中無法訪問child資料的去問題;

作用域插槽代表性的用例是列表元件,允許在parent父元件上對列表項進行自定義顯示,如下該items的所有列表項都可以通過slot定義後傳遞給父元件使用,也就是說資料是相同的,不同的場景頁面可以有不同的展示方式:

}

Vue中slot的使用(通俗易懂)

個人理解 是對元件的擴充套件,通過slot插槽向元件內部指定位置傳遞內容,通過slot可以父子傳參 開發背景 slot出現時為了解決什麼問題 正常情況下,hello world 在元件標籤child中的span標籤會被元件模板template內容替換掉,當想讓元件標籤child中內容傳遞給元件時需要...

通俗易懂的C STL

泛型程式設計 generic programming 是一種語言機制,通過它可以實現乙個標準的容器庫。像類一樣,泛型也是一種抽象資料型別,但是泛型不屬於物件導向,它是物件導向的補充和發展。泛型程式設計在c 上的應用主要體現在兩方面 函式模板和類模板。接下來舉個栗子 csdn部落格 anyway,模板...

通俗易懂SQL server 中的鎖

之前講了資料庫中的事務,為了讓事務順利執行,就有了鎖?1 什麼是鎖?顧名思義,就是防止保護被偷東西,那麼在資料庫中就是防止資料被偷也就是 資料不完整。2 為什麼要用鎖?因為有些時候會出錯,要保證資料正常不出現問題就需要鎖。既然是防止資料被偷,那麼什麼情況下資料 會變得不完整呢?一下就是錯誤例項 在多...