插槽的使用

2022-08-21 00:57:10 字數 1433 閱讀 3454

slot插槽可以理解為乙個佔位符,或者說是子元件暴露的乙個讓父元件傳入自定義內容的介面。插槽內可以包含任何模板**,包括 html,甚至其他的元件。

預設插槽   

具名插槽

作用域插槽

預設插槽

1239

1012

你好13

具名插槽就是給slot標籤加上name屬性

插入插槽的標籤也需要使用對應的slot插入哪個插槽:slot="name"

語法:

1239

1012

slot="name">你好

有時候,我們在父元件使用插槽時需要訪問子元件中的資料,這時候就需要使用作用域插槽。用法:將data變數名 作為元素的乙個 attribute 繫結上去:

需要配合template 使用

123

4```,

5 在使用元件時,通過`v-slot:插槽名字="資料別名"`的方式使用。

6```html78

910}11

1213

1415

1617}18

19

在預設插槽中使用作用域插槽

1239

1020

21slotprops">

2223

24我叫:},我的愛好是:}

在具名插槽中使用作用域插槽

1239

1012

1314

1516

我叫:},我的愛好是:}

插槽的使用

父元件的內容如下 124 hello lanyb 父元件往子元件中插入的內容56 7 子元件中的內容如下 123 hello world 4 父元件要插入的內容將插入在此處56 輸出結果為 hello world hello lanyb以上就是最簡單的slot示例。父元件中的內容,如下 124 he...

vue插槽 預設插槽的基本使用

以下只是學習過程中的筆記。對於vue中的插槽,我的理解是插槽就是子元件中的提供給父元件使用的乙個佔位符,用 表示,父元件可以在這個佔位符中填充任何模板 如 html 元件等,填充的內容會替換子元件的標籤。可以動態的改變子元件內容,讓子元件更具有拓展性。如下 示例 cpn 在父元件中使用插槽 哈哈哈 ...

vue slot插槽的使用

vue官方文件在slot這部分講解的並不是很詳細,這裡用更通俗的語言進行描述。根據官檔的標題來開始吧 假如父元件的 如下 children為註冊的子元件 這裡是插槽的內容,位於子元件內部 渲染結果 這裡是子元件,注意 沒有加入slot標籤哦!上面的 實際效果如下 這裡是父元件 這裡是子元件,注意 沒...