Vue slot用法使用說明

2021-10-10 03:28:47 字數 1306 閱讀 1415

slot 是vue中的乙個概念。把父元件中的內容插入到子元件中。有3種型別的slot, 下面分別詳細描述其用法

1. 單個插槽

又稱為預設插槽,匿名插槽。是最簡單的一種形式。用法如下:

定義了乙個子元件child-comp, 在子元件中寫上,那麼父元件中的內容就會插入到這裡。我們看一下模板渲染出的渲染函式長什麼樣:

父元件渲染函式:

function anonymous(

)

子元件渲染函式:

function anonymous(

) }

從子元件渲染函式中看出渲染成了_t("default"), 其實預設插槽的名字叫default。

2. 具名插槽

顧名思義這種插槽有名字,用法如下:

具名插槽要在子元件中寫上 name="liu",在父元件中寫上slot="liu" ,如果父元件中寫的名字和子元件定義的名字不一致就渲染不出來父元件中的內容。因為通過名字找不到要插入的地方。我們看看具名插槽的渲染函式:

父元件渲染函式:

function anonymous(

)

子元件渲染函式:

function anonymous(

) }

對比一下匿名插槽,具名插槽子元件渲染函式和匿名插槽只是名字改變了,由default 變為自己定義的名字liu。具名插槽父元件增加了乙個物件,這個物件有attrs和slot屬性

,

slot:"liu"

}

3. 作用域插槽

這個插槽可以把子元件中的引數傳遞個父元件中。用法如下:

作用域插槽要在子元件中繫結乙個引數,在父元件中定義slot-scope="item", 通過slot-scope可以把子元件中繫結的引數取出來。渲染函式就比較複雜了,大體看一下吧

父元件渲染函式:

unction anonymous(

)

子元件渲染函式:

unction anonymous(

) )],2)}

}

這個作用域插槽還是個具名插槽。匿名插槽也可以傳遞引數,把名字去掉就可以了。如下所示:

使用說明 附註工具使用說明

附註工具使用說明 附註工具用途 附註工具主要用於更新利用word附註應用程式生成的帶域 的附註,該工具在word右鍵 更新鏈結 的基礎上進行了優化,故在使用時,不能再利用word右鍵 更新鏈結 而要用本工具的 更新當前鏈結 或 更新所有鏈結 使用說明 一 更換路徑 當利用word附註應用程式生成帶域...

const的常見使用說明,用法

1 const int a 100 標準c const 變數宣告加初始化,因為預設內部鏈結所以必須被初始化,其作用域為此檔案,編譯器經過型別接茬後直接用100在編譯時替換。2 extern const int t 100 將const改為外部鏈結,作用域擴大至全域性,編譯時會分配記憶體,並且可以不進...

使用說明 農用遮光網使用說明

農用遮光網使用說明 建築防塵網購買方 建築施工企業 在購買建築防塵網時,應該對 作出比較,可以分辨品牌 型號,且購買時應該在一定程度上了解信譽良莠。建築防塵網購買方 市場售賣方 在選購建築防塵網時,可以把 作為基礎,好的 可以用來彌補信譽不足,而差的 則需要按照你的服務收費。農用遮光網使用說明 用途...