Vue方向:具名插槽喉悴、作用域插槽

1丰榴、具名插槽

????????顧名思義:具名插槽就是有具體名字的插槽,使用時(shí)可以指定替換模板中哪個(gè)插槽的內(nèi)容馒铃。當(dāng)我們需要在子組件模板中不同的位置插入不同的內(nèi)容時(shí),只會(huì)有一個(gè)插槽起作用。

代碼
執(zhí)行結(jié)果

????????通過看結(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ì)被丟棄溜哮。

代碼
執(zhí)行結(jié)果

????????這樣,給每個(gè)內(nèi)容片段放進(jìn)對(duì)應(yīng)的插槽區(qū)域中去色解,這樣就完美的實(shí)現(xiàn)我們想要的效果茂嗓,同樣的,當(dāng)我們放一個(gè)匿名插槽時(shí)去處理匹配不到的內(nèi)容片段科阎,這時(shí)會(huì)不會(huì)也符合我們的預(yù)期效果呢述吸?

代碼
執(zhí)行結(jié)果

????????根據(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ì)象。

代碼
執(zhí)行結(jié)果

????????在2.5.0版本以上瞒渠, slot-scope可以在任意的元素或組件中使用而不再固定死的是在<template>中

代碼

????????這樣簡寫的結(jié)果也是和上面的一模一樣的良蒸。


3、作用域插槽也可以使用解構(gòu)的寫法實(shí)現(xiàn)

代碼
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末伍玖,一起剝皮案震驚了整個(gè)濱河市嫩痰,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌窍箍,老刑警劉巖串纺,帶你破解...
    沈念sama閱讀 222,183評(píng)論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異椰棘,居然都是意外死亡纺棺,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,850評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門邪狞,熙熙樓的掌柜王于貴愁眉苦臉地迎上來祷蝌,“玉大人,你說我怎么就攤上這事帆卓【揠” “怎么了?”我有些...
    開封第一講書人閱讀 168,766評(píng)論 0 361
  • 文/不壞的土叔 我叫張陵剑令,是天一觀的道長糊啡。 經(jīng)常有香客問我,道長尚洽,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,854評(píng)論 1 299
  • 正文 為了忘掉前任靶累,我火速辦了婚禮腺毫,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘挣柬。我一直安慰自己潮酒,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,871評(píng)論 6 398
  • 文/花漫 我一把揭開白布邪蛔。 她就那樣靜靜地躺著急黎,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上勃教,一...
    開封第一講書人閱讀 52,457評(píng)論 1 311
  • 那天淤击,我揣著相機(jī)與錄音,去河邊找鬼故源。 笑死污抬,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的绳军。 我是一名探鬼主播印机,決...
    沈念sama閱讀 40,999評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼门驾!你這毒婦竟也來了射赛?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,914評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤奶是,失蹤者是張志新(化名)和其女友劉穎楣责,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體诫隅,經(jīng)...
    沈念sama閱讀 46,465評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡腐魂,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,543評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了逐纬。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蛔屹。...
    茶點(diǎn)故事閱讀 40,675評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖豁生,靈堂內(nèi)的尸體忽然破棺而出兔毒,到底是詐尸還是另有隱情,我是刑警寧澤甸箱,帶...
    沈念sama閱讀 36,354評(píng)論 5 351
  • 正文 年R本政府宣布育叁,位于F島的核電站,受9級(jí)特大地震影響芍殖,放射性物質(zhì)發(fā)生泄漏豪嗽。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,029評(píng)論 3 335
  • 文/蒙蒙 一豌骏、第九天 我趴在偏房一處隱蔽的房頂上張望龟梦。 院中可真熱鬧,春花似錦窃躲、人聲如沸计贰。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,514評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽躁倒。三九已至荞怒,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間秧秉,已是汗流浹背褐桌。 一陣腳步聲響...
    開封第一講書人閱讀 33,616評(píng)論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留福贞,地道東北人撩嚼。 一個(gè)月前我還...
    沈念sama閱讀 49,091評(píng)論 3 378
  • 正文 我出身青樓,卻偏偏與公主長得像挖帘,于是被迫代替她去往敵國和親完丽。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,685評(píng)論 2 360

推薦閱讀更多精彩內(nèi)容