2023 Vue直播班筆記 - Slot插槽

閱讀時間約 6 分鐘
筆記以個人清楚理解方式記錄

前言

插槽是甚麼?插槽是父元件針對子元件內的某區塊根據不同需求提供不同樣板渲染的功能,也可以說是父元件對於子元件內該區塊的延伸應用,其中包含

  • 具名
  • 默認預設


以下以簡單的圖例說明:

默認插槽

<div id="app">
<h3>Slot 插巢與插巢預設值</h3>
<card></card>
<br>
<card></card>
</div>

<script type="module">
const app = Vue.createApp({});
app.component('card', {
template: `
<div class="card" style="width: 18rem;">
<div class="card-header">
元件 Header
</div>
<div class="card-body">
<p>這段是預設的文字</p>
</div>
<div class="card-footer">
元件 Footer
</div>
</div>`
})
app.mount('#app');
</script>
raw-image


這時我們如果想把card內某個區塊釋放出來要怎麼做呢?

這邊以<p>這段是預設的文字</p> 來展示,把它釋放後會變成

app.component('card', {
template: `
<div class="card" style="width: 18rem;">
<div class="card-header">
元件 Header
</div>
<div class="card-body">
<slot></slot>
</div>
<div class="card-footer">
元件 Footer
</div>
</div>`
})
raw-image


子元件釋放出了空間,我們便可以加以應用它,

因此我們可以在父元件放入自己寫的HTML,

如果外層有定義會先優先引用外層定義的HTML,

沒有則會引用子元件自己本身<slot></slot>內的HTML

<div id="app">
<h3>Slot 插巢與插巢預設值</h3>
<card>
<p>我是父元件定義的</p>
</card>
<br>
<card></card>
</div>
raw-image


由於未具名,所以這是屬於插槽默認的預設值插槽行為,

但是如果有需求要指定各部位顯示的話呢?


具名插槽 / 具名插槽縮寫

我們先準備第二組範例card2

<div id="app">
<h3>具名插巢</h3>
<card2>
<template>我喜歡這張卡片</template>
<!-- 預設請加入 default -->
<template>這是卡片 2</template>
<template>這是卡片腳</template>
</card2>
</div>
<script type="module">
const app = Vue.createApp({});
app.component('card2', {
template: `<div class="card" style="width: 18rem;">
<div class="card-header">
<slot>元件 Header</slot>
</div>
<div class="card-body">
<slot>這段是預設的文字</slot>
</div>
<div class="card-footer">
<slot>元件 Footer</slot>
</div>
</div>`
});

app.mount('#app');
</script>


這時我們可以發現HTML部分變成<template>標籤了,

而JS則有3塊<slot>,但是多開<slot>時沒給的名稱,

外層會不知道哪個要插哪的冏境,因此我們要給它個名稱name

app.component('card2', {
template: `<div class="card" style="width: 18rem;">
<div class="card-header">
<slot name="header">元件 Header</slot>
</div>
<div class="card-body">
<slot>這段是預設的文字</slot>
</div>
<div class="card-footer">
<slot name="footer">元件 Footer</slot>
</div>
</div>`
});


中間先刻意不加name展示,而內層已經有name了,

我們外層也給跟內層配合,所以要針對各<template>下達 v-slot:(內層名稱),

而中間剛剛刻意不加name這時如果有需要讓其也對應的話,

我們也可以幫它加個 v-slot:default 如下圖

<div id="app">
<h3>具名插巢</h3>
<card2>
<template v-slot:header>我喜歡這張卡片</template>
<!-- 預設請加入 default -->
<template v-slot:default>這是卡片 2</template>
<template v-slot:footer>這是卡片腳</template>
</card2>
</div>


此時結果就會變這樣
raw-image


可以隨個人需求調整的slot就完成了~


具名縮寫插槽

嫌v-slot太長嗎? 這邊也提供懶人寫法,

以剛剛的v-slot為例,只要將其改成如下就完成囉~

<div id="app">
<h3>具名插巢縮寫</h3>
<card2>
<template #header>我喜歡這張卡片</template>
<template #default>這是卡片 2</template>
<template #footer>這是卡片腳</template>
</card2>
</div>


  • joker
  • 2024/02/15
3會員
19內容數
是一隻喜愛前端勇往直前的霹靂酷樂貓
留言0
查看全部
發表第一個留言支持創作者!
你可能也想看
迎新活動「方格新手村」:新格友註冊加入方格子,知名日料吃到飽餐券送給你! 👉 還不是 vocus 的會員嗎?點此註冊,參與新手村活動 👈 近期站上也出現了不少新格友,為了歡迎各位的加入,「方格新手村」隨之登場! 即日起,只要是新註冊帳號於活動期間內發佈 3 則文章,就有機會抽獎獲得知名日料吃到飽餐券。原格友也可以一起同樂,我們準備了小任
Thumbnail
2024-06-21
90
閱讀心得:展現自我的生活態度|成熟大人的說話課我們每天都在說話,但說出的話合適嗎? Sunny最近讀完一本有關溝通的書籍。 這是由世紀奧美公關的創辦人「丁菱娟」所寫的書,書的全名《丁菱娟的成熟大人說話課:如何說,才能得體又不傷人?反擊時,如何堅定又有力量?任何情境都可用的38個溝通之道》。 會找這本書來看,主要是因為Sunny 近期發
Thumbnail
2024-07-10
70
防曬產品係數測試報告彙整(2024年)從2014年起,自己對於市售防曬產品的效能產生了濃厚的興趣。因為當時候發現不少產品的防曬係數其實標示是有問題的,像是原本應該是人體測試的SPF與PA數值,實際上沒有做,只用機器測試的數據來充當,但這兩者卻有很大的差異。像是防曬係數其實有強度、廣度與平均度三個面向需要一起判斷,但多數廠商並沒有完整標示
Thumbnail
2023-04-27
40
【程式學習日記】六角學院:2023 Vue 作品實戰班從 Vue 班畢業已經 1 個多月,最近也轉職成功,終於有機會把這段歷程記錄下來,當作一個里程碑。此次參加 Vue 班,心境上最大的不同,大概是知道自己即將在完課後,踏上求職道路。所以如果能在課堂期間 2 個月內完成求職作品,我就能提早出發。 ▍學習狀況 雖然先前有稍微玩過 Vue,但也早已
Thumbnail
2024-05-11
5
2023這一年讓我知道了沒有完美的人事物 我也是一個充滿缺失的個體
Thumbnail
2024-03-11
2
2023這些那些關於即將成為過去的那一年 在這個名之為我的小宇宙 泛起過一片漣漪 和其他生命的交會與告別 或久別重逢 或不如歸去 留下些什麼 我們就逐漸長成那個模樣 記憶的刻痕是我們選擇的事實 似真還假 孰是孰非 有何干係 物質構築的既成事實 缺席的不在場證明
Thumbnail
發佈在
YiYi的沙龍
2023-12-31
3
2023年草嶺古道芒草季|交通路徑、美景圖文紀錄幫大家標示容易走錯的幾個路口,希望可以幫助大家的旅途順利~ 嘗試用圖文方式記錄遊記,好像讀起來更生動了。
Thumbnail
2023-12-04
11
2023-Vue六角直撥班心得為什麼會參加這個課程 2022年是個不一樣的年,因為當初自學由設計轉前端工程師、一路上跌跌撞撞因為想要把基底打穩所以今年下定了決心從2022切版班、Js直播班、一路跟到目前2022秋季Vue直播班。 Vue直播班的心得 前兩週其實都還跟得上,但到了第三週對我而言確實感覺有些難了啊~正在心裡徬徨第三週
Thumbnail
2023-03-19
3
20232023年
Thumbnail
發佈在
竹川獅
2023-01-21
6
2023新年一年新的開始,最近事情太多,本想說寫點什麼的...但最近真的工作遇到些瓶頸,剛好在年底把這些不順遂的事情一併都處理掉了,稍微有點時間可以好好的敘述一下最近發生的事情。是這樣的,我前份工作傳統產業做得不太開心,本人的職業是平面設計師,據大家的認知傳產從上到下都是親戚接管事業,當然我的工作也不例外,
Thumbnail
2023-01-01
6
2023欲說還休,欲說還休,卻道天涼好個秋 想來也到了「欲說還休」的時候了。 是年紀的增長多了顧慮,還是收斂了自己的負面情緒,或者,只是懶了,我在也不像從前能在FB上po出長文。不管當下的情緒多麼澎派,多想要發表言論,回到家了,坐在電腦前面,就沒了發文的欲望了。 其實也有點擔心,難道已經被速食文化變得淺薄了
Thumbnail
2022-12-31
7
2023新的一年即將開始,人類這種生物很奇妙,喜歡有一種重新啟動的感覺。
Thumbnail
發佈在
記憶
2022-12-30
6
2023 2023 1.我希望我可以自由的工作、開心的工作、利用我的工作能力我自己賺到生活費。 2.我希望我可以有車子、讓我自由的旅行、享受大自然、我並不是想要在家裡放一台車、而是可以讓我隨時隨時都有一台車。 3.我希望我可以去一些國家旅行想去泰國、加拿大,芬蘭、歐洲。 4.我想瘦到我想要的體重。
Thumbnail
2022-07-07
2
迎新活動「方格新手村」:新格友註冊加入方格子,知名日料吃到飽餐券送給你! 👉 還不是 vocus 的會員嗎?點此註冊,參與新手村活動 👈 近期站上也出現了不少新格友,為了歡迎各位的加入,「方格新手村」隨之登場! 即日起,只要是新註冊帳號於活動期間內發佈 3 則文章,就有機會抽獎獲得知名日料吃到飽餐券。原格友也可以一起同樂,我們準備了小任
Thumbnail
2024-06-21
90
閱讀心得:展現自我的生活態度|成熟大人的說話課我們每天都在說話,但說出的話合適嗎? Sunny最近讀完一本有關溝通的書籍。 這是由世紀奧美公關的創辦人「丁菱娟」所寫的書,書的全名《丁菱娟的成熟大人說話課:如何說,才能得體又不傷人?反擊時,如何堅定又有力量?任何情境都可用的38個溝通之道》。 會找這本書來看,主要是因為Sunny 近期發
Thumbnail
2024-07-10
70
防曬產品係數測試報告彙整(2024年)從2014年起,自己對於市售防曬產品的效能產生了濃厚的興趣。因為當時候發現不少產品的防曬係數其實標示是有問題的,像是原本應該是人體測試的SPF與PA數值,實際上沒有做,只用機器測試的數據來充當,但這兩者卻有很大的差異。像是防曬係數其實有強度、廣度與平均度三個面向需要一起判斷,但多數廠商並沒有完整標示
Thumbnail
2023-04-27
40
【程式學習日記】六角學院:2023 Vue 作品實戰班從 Vue 班畢業已經 1 個多月,最近也轉職成功,終於有機會把這段歷程記錄下來,當作一個里程碑。此次參加 Vue 班,心境上最大的不同,大概是知道自己即將在完課後,踏上求職道路。所以如果能在課堂期間 2 個月內完成求職作品,我就能提早出發。 ▍學習狀況 雖然先前有稍微玩過 Vue,但也早已
Thumbnail
2024-05-11
5
2023這一年讓我知道了沒有完美的人事物 我也是一個充滿缺失的個體
Thumbnail
2024-03-11
2
2023這些那些關於即將成為過去的那一年 在這個名之為我的小宇宙 泛起過一片漣漪 和其他生命的交會與告別 或久別重逢 或不如歸去 留下些什麼 我們就逐漸長成那個模樣 記憶的刻痕是我們選擇的事實 似真還假 孰是孰非 有何干係 物質構築的既成事實 缺席的不在場證明
Thumbnail
發佈在
YiYi的沙龍
2023-12-31
3
2023年草嶺古道芒草季|交通路徑、美景圖文紀錄幫大家標示容易走錯的幾個路口,希望可以幫助大家的旅途順利~ 嘗試用圖文方式記錄遊記,好像讀起來更生動了。
Thumbnail
2023-12-04
11
2023-Vue六角直撥班心得為什麼會參加這個課程 2022年是個不一樣的年,因為當初自學由設計轉前端工程師、一路上跌跌撞撞因為想要把基底打穩所以今年下定了決心從2022切版班、Js直播班、一路跟到目前2022秋季Vue直播班。 Vue直播班的心得 前兩週其實都還跟得上,但到了第三週對我而言確實感覺有些難了啊~正在心裡徬徨第三週
Thumbnail
2023-03-19
3
20232023年
Thumbnail
發佈在
竹川獅
2023-01-21
6
2023新年一年新的開始,最近事情太多,本想說寫點什麼的...但最近真的工作遇到些瓶頸,剛好在年底把這些不順遂的事情一併都處理掉了,稍微有點時間可以好好的敘述一下最近發生的事情。是這樣的,我前份工作傳統產業做得不太開心,本人的職業是平面設計師,據大家的認知傳產從上到下都是親戚接管事業,當然我的工作也不例外,
Thumbnail
2023-01-01
6
2023欲說還休,欲說還休,卻道天涼好個秋 想來也到了「欲說還休」的時候了。 是年紀的增長多了顧慮,還是收斂了自己的負面情緒,或者,只是懶了,我在也不像從前能在FB上po出長文。不管當下的情緒多麼澎派,多想要發表言論,回到家了,坐在電腦前面,就沒了發文的欲望了。 其實也有點擔心,難道已經被速食文化變得淺薄了
Thumbnail
2022-12-31
7
2023新的一年即將開始,人類這種生物很奇妙,喜歡有一種重新啟動的感覺。
Thumbnail
發佈在
記憶
2022-12-30
6
2023 2023 1.我希望我可以自由的工作、開心的工作、利用我的工作能力我自己賺到生活費。 2.我希望我可以有車子、讓我自由的旅行、享受大自然、我並不是想要在家裡放一台車、而是可以讓我隨時隨時都有一台車。 3.我希望我可以去一些國家旅行想去泰國、加拿大,芬蘭、歐洲。 4.我想瘦到我想要的體重。
Thumbnail
2022-07-07
2