Discuz! Board

標題: 為元件定義事件 [打印本頁]

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

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

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

歡迎光臨 Discuz! Board (http://pica.go1.tw/)