中程式碼的複用,為我們提供了 mixnis. 模板的複用,為我們提供了 插槽( slot )

插槽的分類

預設插槽

具名插槽
客棧

作用域插槽

當我們的元件中 我們只需要插入一個 html 標籤的時候,就使用預設插槽就可以了,

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

當我們的插槽中要使用元件中的資料的時候,就可能會用到作用域插槽

下面展示一下,預設插槽的用法

使用時

以上就是預設插槽的使用

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

使用的時候

這裡說一下,vue 2.6 版本有一個新的插槽的寫法,其中要使用到 template 標籤,我們知道 template 只是一個包裹標籤,它不會渲染到真實頁面上,新的http://www.cppcns.comslot 的寫法就是使用到了它,沒有它還不行,如下圖

下面來說一下作用域插槽

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

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

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

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

上圖中,可以看到 作用域插槽中 向使用者傳遞了兩個資料

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

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

總結

本篇文章就BTKwy到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容！