1丰榴、具名插槽
????????顧名思義:具名插槽就是有具體名字的插槽,使用時(shí)可以指定替換模板中哪個(gè)插槽的內(nèi)容馒铃。當(dāng)我們需要在子組件模板中不同的位置插入不同的內(nèi)容時(shí),只會(huì)有一個(gè)插槽起作用。
????????通過看結(jié)果奈懒,很顯然,這并不是我們預(yù)期達(dá)到的效果蚕涤,我們想要分三塊不同展示筐赔,結(jié)果卻是展示了三大塊區(qū)域出來,這就表明這樣使用插槽是存在問題的揖铜。
1.1? 具名插槽和默認(rèn)插槽
????????<slot>元素可以用一個(gè)特殊的屬性name來進(jìn)一步去配置怎么樣去分發(fā)內(nèi)容茴丰,多個(gè)插槽會(huì)有不同的名字,具名插槽將匹配內(nèi)容片段中會(huì)有對(duì)應(yīng)的slot的元素天吓,而沒有使用name屬性的slot插槽就叫做匿名插槽贿肩,也被稱為默認(rèn)插槽,在子組件中仍然可以有一個(gè)匿名插槽龄寞,這樣汰规,一些找不到相匹配的片段就同樣可以展示出來,但是如果沒有匿名插槽物邑,這些找不到相匹配的內(nèi)容片段就會(huì)被丟棄溜哮。
????????這樣,給每個(gè)內(nèi)容片段放進(jìn)對(duì)應(yīng)的插槽區(qū)域中去色解,這樣就完美的實(shí)現(xiàn)我們想要的效果茂嗓,同樣的,當(dāng)我們放一個(gè)匿名插槽時(shí)去處理匹配不到的內(nèi)容片段科阎,這時(shí)會(huì)不會(huì)也符合我們的預(yù)期效果呢述吸?
????????根據(jù)結(jié)果,沒有匹配的數(shù)據(jù)也會(huì)被匿名插槽所容納锣笨,這樣就解決了開發(fā)上的很多問題蝌矛。
2、作用域插槽
????????插槽的內(nèi)容最后是在子組件模板上渲染的错英,但是假設(shè)這時(shí)我們需要使用子組件中的數(shù)據(jù)入撒,這種時(shí)候就需要作用域插槽解決問題了。
????????作用域插槽是一種特殊類型的插槽椭岩,用作一個(gè)(能被傳遞數(shù)據(jù)的)可重用模板衅金,來代替已經(jīng)渲染好的元素噪伊。利用 slot 標(biāo)簽將子組件的數(shù)據(jù)傳遞到分發(fā)的內(nèi)容上,類似于父子組件傳值的prop傳遞數(shù)據(jù)氮唯。
????????在父級(jí)中鉴吹,具有特殊屬性的 slot-scope 的<template>元素必須存在,表示它是作用域插槽的模板惩琉, slot-scope 的值將被用作一個(gè)臨時(shí)變量名豆励,此變量接收子組件傳遞過來的props對(duì)象。
????????在2.5.0版本以上瞒渠, slot-scope可以在任意的元素或組件中使用而不再固定死的是在<template>中
????????這樣簡寫的結(jié)果也是和上面的一模一樣的良蒸。