VUE插槽 slot 的使用

2021-10-01 04:57:44 字數 1428 閱讀 2970

經驗/問題描述

插槽(slot)是vue提出來的乙個概念,正如名字一樣,插槽用於決定將所攜帶的內容,插入到指定的某個位置,從而使模板分塊,具有模組化的特質和更大的重用性。插槽顯不顯示、怎樣顯示是由父元件來控制的,而插槽在**顯示就由子元件來進行控制。

解決方法

幾種常見的插槽:

1、預設插槽

父元件:

在父元件引用的子元件中寫入想要顯示的內容(可以使用標籤,也可以不用)

子元件:

在子元件中寫入slot,slot所在的位置就是父元件要顯示的內容。

顯示內容:

2、具名插槽

子元件:

在子元件中定義了三個slot標籤,其中有兩個分別新增了name屬性header和footer

父元件:

在父元件中使用template並寫入對應的slot值來指定該內容在子元件中現實的位置(當然也不用必須寫到template),沒有對應值的其他內容會被放到子元件中沒有新增name屬性的slot中

顯示內容:

3、編譯作用域

父元件

4、作用域插槽

子元件:

在子元件的slot標籤上繫結需要的值。

父元件:

在父元件上使用slot-scope屬性,user.data就是子元件傳過來的值。

顯示內容:

Vue 使用插槽(slot)

當父元件向子元件傳值的時候,有時候,父元件傳的並不是單純的數值 字串,有可能是帶標籤 dom 的資料,那麼如何傳值呢?如果我們像正常父向子傳值那樣操作。content hello,slot slott 子元件 class slott div div template export default s...

Vue插槽slot使用

子元件 child1 此時插槽區域內顯示文案hello 父元件 hello用途 讓內容顯示到元件內的指定位置 子元件 child1 顯示預設的插槽 會顯示v slot為content的內容 parent 預設插槽使用default做引數 哈哈哈 具名插槽使用插槽名做引數 具名插槽 用途 讓內容成為某...

vue使用插槽slot

vue中使用slot插槽 父元件 插槽的使用 父元件 父元件接受子元件的資料 child slot header 我是頭部 template footer 我是底部 template 你好我是底部元件 div slot use 子元件的內容 slotcontainder 我是子元件 div 子元件的...