第十一屆鐵人賽 前端工程師的另一個選擇 svelte DAY16- 插座的屬性

slot props 元件如何傳遞變數給子節點

slot props 是什麼是今天的主題,在分享完 svelte slot 的基本內容後要來告訴大家插座元件怎麼傳遞變數到子節點。

回顧一下前幾天的內容

前幾天介紹了slot是什麼,並且介紹了svelte slot 的基本內容named slots 命名插座後大家應該知道要怎麼在元件內插入自定義的子節點。

但是一般的svelte元件可以宣告變數以及屬性,若是子節點不能使用變數這樣在開發上有著很多不方便,因此今天要來分享如何將元件的變數傳遞給子節點使用。

slot props 插座的屬性

之前有分享過在html上使用變數,但是今天在元件上的變數如何教過子節點使用呢?接下來先用例子來具體的描述我們的需求,請看以下例子。

跟之前一樣,我們需要兩個元件,以下先介紹使用插座元件的程式進入點App.svelte。

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

<style>
    div {
        padding: 1em;
        margin: 0 0 1em 0;
        background-color: #eee;
    }

    .active {
        background-color: #ff3e00;
        color: white;
    }
</style>

<Hoverable>
    <div class:active={hovering}>
        {#if hovering}
            <p>I am being hovered upon.</p>
        {:else}
            <p>Hover over me!</p>
        {/if}
    </div>
</Hoverable>

當然上面例子直接跑會報錯,因為子節點沒有定義 hovering ,而這變數是我們要由Hoverable.svelte傳遞到子節點的,所以我們需要定義這個變數在Hoverable.svelte,以下是我們實作Hoverable.svelte的內容。

子節點的變數來源

下面就是我們實作的Hoverable.svelte,當然不能忘記要傳遞給子節點的變數。

<script>
    let hovering;

    function enter() {
        hovering = true;
    }

    function leave() {
        hovering = false;
    }
</script>

<div on:mouseenter={enter} on:mouseleave={leave}>
    <slot slotHovering={hovering}></slot>
</div>

這元件的功用在於監聽滑鼠移動事件,檢查鼠標是否移動到元件上面,再來就是讓其子節點使用hovering這屬性,所以我們在slot中定義slotHovering這個變數,來針對狀態不同顯示不同的樣式。

準備好需要的元件後接下來要說明如何從Hoverable.svelte將hovering取出來傳遞給子節點。

取出變數傳遞給子節點

在準備就緒後我們就要把子節點與插座元件之間的關聯給實作出來,當然大家可以看一下下列的式子。

<Hoverable let:slotHovering={hovering}>
    <div class:active={hovering}>
        {#if hovering}
            <p>I am being hovered upon.</p>
        {:else}
            <p>Hover over me!</p>
        {/if}
    </div>
</Hoverable>

上面例子我們針對Hoverable這個標籤加上 let:slotHovering={hovering} 這指的是將元件插座的slotHovering變數取出來跟子節點的變數hovering綁定在一起的意思。因此調整一下讓讀者們看得更清楚。

<Hoverable let:slotHovering={active}>
    <div class:active>
        {#if active}
            <p>I am being hovered upon.</p>
        {:else}
            <p>Hover over me!</p>
        {/if}
    </div>
</Hoverable>

小結

今天跟大家分享一下關於slot要怎麼傳遞變數給子節點,當然今天的內容跟昨天一樣,如果有多個slot可以使用named slots 命名插座來決定子節點要放置的地方,還有向上面例子一樣,如果變數名稱相等就可以省略賦值的寫法了。

發佈留言

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