vue中的插槽詳解
阿新 • • 發佈:2021-10-20
中程式碼的複用,為我們提供了 mixnis. 模板的複用,為我們提供了 插槽( slot )
插槽的分類
預設插槽
具名插槽
客棧
作用域插槽
當我們的元件中 我們只需要插入一個 html 標籤的時候,就使用預設插槽就可以了,
如果有多個,我們就要給第一個 插槽取一個名字,來決定到底插入哪一個插槽
當我們的插槽中要使用元件中的資料的時候,就可能會用到作用域插槽
www.cppcns.com下面展示一下,預設插槽的用法
使用時
以上就是預設插槽的使用
具名插槽,也就是說我們在元件中定一個 多個 slot,為了分清到底作用到哪一個上面,給插槽取一個名字來區分
使用的時候
這裡說一下,vue 2.6 版本有一個新的插槽的寫法,其中要使用到 template 標籤,我們知道 template 只是一個包裹標籤,它不會渲染到真實頁面上,新的http://www.cppcns.comslot 的寫法就是使用到了它,沒有它還不行,如下圖
下面來說一下作用域插槽
我們來看一下,上面的兩種 插槽 展示的資料,都是放在 插槽的使用者 About 元件的 data中的,
但是我們有時候,使用者是不管這些資料的,資料中從 catetory 元件中自已獲取的,
使用者 About 只需要來管理 插槽中的內容的展現形式,
這時就要使用作用域插槽了
上圖中,可以看到 作用域插槽中 向使用者傳遞了兩個資料
那個使用者是怎麼接收使用的呢
以上便是 vue 的三種插槽的使用
總結
本篇文章就BTKwy到這裡了,希望能夠給你帶來幫助,也希望您能夠多多關注我們的更多內容!