為元件定義事件

mstmahmuda11121

建立子元件並定義輸入屬性 使用我們目前的圖書列表應用程序，我們可以輸入圖書，但不能刪除它們。所以我們需要擴展我們的列表項目。為了保持我們的程式碼乾淨 - 並看到更多 Svelte 的功能 - 我們將列表元素分離到它自己的元件中。透過export let book，我們指定元件從外部接受名為book 的屬性。我們的主要元件中的用法如下所示 插入元件非常簡單：我們將其作為預設導入導入，並使用名稱作為標籤。我們使用book={book}輸入 book屬性。或者，在這種情況下，我們也可以使用簡寫符號{book}，因為變數與輸入屬性具有相同的名稱。 為元件定義事件 接下來，我們擴展 Book 元件，以便我們也可以再次刪除書籍。

為此，我們在元件上定義一個事件綁定，當使用者想要刪除該書 沙烏地阿拉伯 電話號碼 時該事件會觸發。 為了實現這一點，我們使用createEventDispatcher。我們將調度程序稱為第一個參數，並使用指定事件名稱的字串。第二個參數接受任何事件參數，在本例中為書名。在父元件中，我們像其他事件一樣使用on:<eventName>監聽該事件，在本例中為 。事件參數在在這一點上應該要提到的是，就像在 React 中一樣，我們也可以使用回調 props，也就是我們可以輸入一個函數作為輸入屬性，然後呼叫函數。最終使用哪種變體主要取決於個人品味。 插圖 -Svelte 官方網站上的線上編輯器向您展示生成的程式碼是什麼樣子的 使用儲存空間進行狀態管理 為了保存我們的數據，為了簡單起見，我們使用localStorage。




然而，狀態管理和持久性不應該再是組件的一部分，而應該外包。 Svelte 的商店模組已包含在核心中，非常適合此目的。 store模組的一部分是我們將使用的可寫入函數。可寫入提供用於操作的設定和更新方法以及用於讀取的訂閱方法。有了這個基本構建塊，我們可以輕鬆建立我們自己的全域狀態管理器我們使用 Svelte 的可寫來創建一個商店。然而，只有訂閱方法是公開的；其餘的都是透過內部更新商店的專業方法來處理的。 整合整件事情非常容易。我們導入書店並將書籍清單管理委託給它。書店更新的反應特別優雅。任何地方都看不到訂閱-取消訂閱模式。相反，我們只寫$books。編譯器辨識出有一個名為books 的對應變量，它有一個subscribe方法，可以為我們產生程式碼。