將 Svelte 應用元件化

在上一篇文章中，我們開始開發待辦事項應用程式。本文的主要目標是瞭解如何將應用程式分解成可管理的元件，以及如何在元件之間共享資訊。我們將對應用程式進行元件化，然後新增更多功能，允許使用者更新現有的元件。

先決條件	至少，建議您熟悉核心HTML、CSS和JavaScript語言，並瞭解終端/命令列。您需要一個安裝了 Node 和 npm 的終端來編譯和構建您的應用程式。
目標	學習如何將我們的應用程式分解成元件，以及如何在元件之間共享資訊。

先決條件

至少，建議您熟悉核心HTML、CSS和JavaScript語言，並瞭解終端/命令列。

您需要一個安裝了 Node 和 npm 的終端來編譯和構建您的應用程式。

目標

學習如何將我們的應用程式分解成元件，以及如何在元件之間共享資訊。

與我們一起編寫程式碼

Git

使用以下命令克隆 GitHub 倉庫（如果您尚未克隆）：

bash

git clone https://github.com/opensas/mdn-svelte-tutorial.git

然後，要進入當前應用程式狀態，請執行：

bash

cd mdn-svelte-tutorial/04-componentizing-our-app

或者直接下載資料夾的內容

bash

npx degit opensas/mdn-svelte-tutorial/04-componentizing-our-app

請記住執行npm install && npm run dev以開發模式啟動應用程式。

REPL

要使用 REPL 與我們一起編寫程式碼，請從以下地址開始：

https://svelte.dev/repl/99b9eb228b404a2f8c8959b22c0a40d3?version=3.23.2

將應用分解成元件

在 Svelte 中，應用程式由一個或多個元件組成。元件是一個可重用、自包含的程式碼塊，封裝了屬於一起的 HTML、CSS 和 JavaScript，並寫入 .svelte 檔案中。元件可以很大或很小，但通常定義明確：最有效的元件服務於單一、明確的目的。

定義元件的好處類似於將程式碼組織成可管理片段的更通用的最佳實踐。它將幫助您瞭解它們之間的關係，促進重用，並使您的程式碼更易於推理、維護和擴充套件。

但是，您如何知道哪些內容應該拆分成自己的元件呢？

對此沒有硬性規定。有些人更喜歡直觀的方法，開始檢視標記並圍繞每個似乎具有自身邏輯的元件和子元件繪製框。

其他人則應用與決定是否應建立新函式或物件相同的技術。其中一項技術是單一職責原則——即，元件理想情況下只應執行一項操作。如果它最終變得越來越大，則應將其拆分為更小的子元件。

這兩種方法應該相互補充，幫助您決定如何更好地組織元件。

最終，我們將把我們的應用程式拆分為以下元件：

Alert.svelte：用於傳達已發生操作的通用通知框。
NewTodo.svelte：允許您輸入新待辦事項的文字輸入框和按鈕。
FilterButton.svelte：全部、活動和已完成按鈕，允許您將過濾器應用於顯示的待辦事項。
TodosStatus.svelte：顯示“x 個專案已完成，共 y 個專案”的標題。
Todo.svelte：單個待辦事項。每個可見的待辦事項都將在此元件的單獨副本中顯示。
MoreActions.svelte：UI 底部的選中全部和移除已完成按鈕，允許您對待辦事項執行批次操作。

graphical representation of the list of components in our app

在本文中，我們將專注於建立FilterButton和Todo元件；我們將在以後的文章中介紹其他元件。

讓我們開始吧。

注意：在建立我們的前幾個元件的過程中，我們還將學習在元件之間通訊的不同技術以及每種技術的優缺點。

提取我們的篩選元件

我們將從建立FilterButton.svelte開始。

首先，建立一個新檔案，components/FilterButton.svelte。

在此檔案中，我們將宣告一個filter prop，然後將相關的標記從Todos.svelte複製到其中。將以下內容新增到檔案中：

svelte

<script>
  export let filter = 'all'
</script>

<div class="filters btn-group stack-exception">
  <button class="btn toggle-btn" class:btn__primary={filter === 'all'} aria-pressed={filter === 'all'} on:click={() => filter = 'all'} >
    <span class="visually-hidden">Show</span>
    <span>All</span>
    <span class="visually-hidden">tasks</span>
  </button>
  <button class="btn toggle-btn" class:btn__primary={filter === 'active'} aria-pressed={filter === 'active'} on:click={() => filter = 'active'} >
    <span class="visually-hidden">Show</span>
    <span>Active</span>
    <span class="visually-hidden">tasks</span>
  </button>
  <button class="btn toggle-btn" class:btn__primary={filter === 'completed'} aria-pressed={filter === 'completed'} on:click={() => filter = 'completed'} >
    <span class="visually-hidden">Show</span>
    <span>Completed</span>
    <span class="visually-hidden">tasks</span>
  </button>
</div>

回到我們的Todos.svelte元件中，我們希望使用FilterButton元件。首先，我們需要匯入它。在Todos.svelte © . Content available under a Creative Commons license.