溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“vue中的插槽有什么用”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue中的插槽有什么用”這篇文章吧。
vue中代碼的復(fù)用, 為我們提供了 mixnis. 模板的復(fù)用, 為我們提供了 插槽( slot )
插槽的分類
默認(rèn)插槽
具名插槽
作用域插槽
當(dāng)我們的組件中 我們只需要插入一個(gè) html 標(biāo)簽的時(shí)候, 就使用默認(rèn)插槽就可以了,
如果有多個(gè), 我們就要給第一個(gè) 插槽取一個(gè)名字, 來決定到底插入哪一個(gè)插槽
當(dāng)我們的插槽中要使用組件中的數(shù)據(jù)的時(shí)候, 就可能會(huì)用到作用域插槽
下面展示一下, 默認(rèn)插槽的用法
使用時(shí)
以上就是默認(rèn)插槽的使用
具名插槽, 也就是說我們?cè)诮M件中定一個(gè) 多個(gè) slot , 為了分清到底作用到哪一個(gè)上面, 給插槽取一個(gè)名字來區(qū)分
使用的時(shí)候
這里說一下, vue 2.6 版本有一個(gè)新的插槽的寫法, 其中要使用到 template 標(biāo)簽, , 我們知道 template 只是一個(gè)包裹標(biāo)簽, 它不會(huì)渲染到真實(shí)頁(yè)面上, 新的slot 的寫法就是使用到了它, 沒有它還不行, 如下圖
下面來說一下作用域插槽
我們來看一下, 上面的兩種 插槽 展示的數(shù)據(jù), 都是放在 插槽的使用者 About 組件的 data中的,
但是我們有時(shí)候, 使用者是不管這些數(shù)據(jù)的, 數(shù)據(jù)中從 catetory 組件中自已獲取的,
使用者 About 只需要來管理 插槽中的內(nèi)容的展現(xiàn)形式,
這時(shí)就要使用作用域插槽了
上圖中, 可以看到 作用域插槽中 向使用者傳遞了兩個(gè)數(shù)據(jù)
那個(gè)使用者是怎么接收使用的呢
以上是“vue中的插槽有什么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
