vue中的插槽詳解

vue中代碼的復用, 為我們提供瞭 mixnis. 模板的復用, 為我們提供瞭插槽( slot )

插槽的分類

默認插槽

具名插槽

作用域插槽

當我們的組件中我們隻需要插入一個 html 標簽的時候, 就使用默認插槽就可以瞭,

如果有多個, 我們就要給第一個插槽取一個名字, 來決定到底插入哪一個插槽

當我們的插槽中要使用組件中的數據的時候, 就可能會用到作用域插槽

下面展示一下, 默認插槽的用法

在這裡插入圖片描述

使用時

在這裡插入圖片描述

以上就是默認插槽的使用

具名插槽, 也就是說我們在組件中定一個多個 slot , 為瞭分清到底作用到哪一個上面, 給插槽取一個名字來區分

在這裡插入圖片描述

使用的時候

在這裡插入圖片描述

這裡說一下, vue 2.6 版本有一個新的插槽的寫法, 其中要使用到 template 標簽, , 我們知道 template 隻是一個包裹標簽, 它不會渲染到真實頁面上, 新的slot 的寫法就是使用到瞭它, 沒有它還不行, 如下圖

在這裡插入圖片描述

下面來說一下作用域插槽

我們來看一下, 上面的兩種插槽展示的數據, 都是放在插槽的使用者 About 組件的 data中的,

但是我們有時候, 使用者是不管這些數據的, 數據中從 catetory 組件中自已獲取的,

使用者 About 隻需要來管理插槽中的內容的展現形式,

這時就要使用作用域插槽瞭

在這裡插入圖片描述

上圖中, 可以看到作用域插槽中向使用者傳遞瞭兩個數據

那個使用者是怎麼接收使用的呢

在這裡插入圖片描述

以上便是 vue 的三種插槽的使用

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容！