插槽的使用

2022-08-28 02:54:11 字數 899 閱讀 3705

父元件的內容如下:

124

hello lanyb

//父元件往子元件中插入的內容56

7

子元件中的內容如下:

123

hello world

4//父元件要插入的內容將插入在此處56

輸出結果為:

hello world

hello lanyb

以上就是最簡單的slot示例。

父元件中的內容,如下:

124

hello lanyb

//定義兩個具名插槽

5hello world

//定義兩個具名插槽67

8

子元件中的內容,如下:

123

//名字叫ender的插槽中的內容會插入至此

4我是分割線

5//名字叫header的插槽中的內容會插入到此67

顯示結果為:

hello world

我是分割線

hello lanyb

首先是1個示例,如下:

123

891011

但是,這種寫法被寫死了,不能按照自己的方式進行輸出;

所以,這裡要換成根據使用者需要顯示的方式來進行顯示,即在子元件中去掉標籤中的內容,即:

123

1011

然後,在父元件中的內容為:

124

5}//props用於接收父元件中item傳遞過來的值,顯示的方式為標籤67

89

同理,也可以把}換成,這樣的話,顯示的方式為標籤。

插槽的使用

slot插槽可以理解為乙個佔位符,或者說是子元件暴露的乙個讓父元件傳入自定義內容的介面。插槽內可以包含任何模板 包括 html,甚至其他的元件。預設插槽 具名插槽 作用域插槽 預設插槽 1239 1012 你好13 具名插槽就是給slot標籤加上name屬性。插入插槽的標籤也需要使用對應的slot插...

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

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

vue slot插槽的使用

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