第十一屆鐵人賽 前端工程師的另一個選擇 svelte DAY14- slot 複合式元件

svelte slot 的介紹

svelte slot 是在說明完html的事件以及變數綁定還有fetch和promise還有await之後要說明的,為什麼這個 slot 這麼重要,因為它可以讓元件開發更便利,廢話不多說先讓大家看看他的威力。

內容介紹

相信讀者們常會有遇到,有很多html都很相同,但是又需要客製化一些部分,但是又不確定有哪些地方需要客製化,所以在開發上很不容易把共同的地方抽象出來。所以這時html就有slot這個標籤的出現,但是當然不時所有的瀏覽器都支援這功能,更別提舊版本的瀏覽器。那slot這功能的特點在哪裡呢?大家可以看看slot介紹,不過簡單講就是把html的原件下的子節點內嵌到元件內,這樣描述應該大家會聽得很模糊,所以大家看一下下列的例子,這時需要有兩個元件
如下所示。

svelte slot 的實作

首先是App.svelte的相關內容,主要是使用到後面的Box.svelte並在其下面有定義html的子節點。

<script>
    import Box from './Box.svelte';
</script>

<Box>
    <h2>Hello!</h2>
    <p>This is a box. It can contain anything.</p>
</Box>

接下來就是Box.svelte的相關內容,這邊定義了相關的css樣式,但是重點在於slot這個html標籤,因為在App.svelte裡面定義的Box子節點會直接放到slot這個html標籤的位置,所以說這個Box.svelte可以很簡單的覆用,只要將先關的html放在其子節點就可以了。

<style>
    .box {
        width: 300px;
        border: 1px solid #aaa;
        border-radius: 2px;
        box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
        padding: 1em;
        margin: 0 0 1em 0;
    }
</style>

<div class="box">
    <slot></slot>
</div>

如何設定預設值

當然大家會想要直接使用Box.svelte這元件,所以這時候就會想說有沒有設定預設值的方式,這裡只要將上面的例子修改成下列內容即可。

<style>
    .box {
        width: 300px;
        border: 1px solid #aaa;
        border-radius: 2px;
        box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
        padding: 1em;
        margin: 0 0 1em 0;
    }
</style>

<div class="box">
    <slot>
        <em>no content was provided</em>
    </slot>
</div>

這時只要使用Box.svelte時沒有子節點就會直接顯示預設的內容。

小結

在介紹完基本的svelte的html功能後要開始進入進階的內容了,今天跟大家介紹slot,但是今天的slot只是初步的介紹大家如何使用,待明日在更進一步介紹slot的進階內容。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *