当前位置：文江博客知识库 en-US 文档 Learn Tools_and_testing Client-side_JavaScript_frameworks Svelte_components

Componentizing our Svelte app - Learn web development 编辑

In the last article we started developing our Todo list app. The central objective of this article is to look at how to break our app into manageable components and share information between them. We'll componentize our app, then add more functionality to allow users to update existing components.

Prerequisites:	At minimum, it is recommended that you are familiar with the core HTML, CSS, and JavaScript languages, and have knowledge of the terminal/command line. You'll need a terminal with node + npm installed to compile and build your app.
Objective:	To learn how to break our app into components and share information among them.

Prerequisites:

At minimum, it is recommended that you are familiar with the core HTML, CSS, and JavaScript languages, and have knowledge of the terminal/command line.

You'll need a terminal with node + npm installed to compile and build your app.

Objective:

To learn how to break our app into components and share information among them.

Code along with us

Git

Clone the github repo (if you haven't already done it) with:

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

Then to get to the current app state, run

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

Or directly download the folder's content:

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

Remember to run npm install && npm run dev to start your app in development mode.

REPL

To code along with us using the REPL, start at

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

Breaking the app into components

In Svelte, an application is composed from one or more components. A component is a reusable, self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written into a .svelte file. Components can be big or small, but they are usually clearly defined: the most effective components serve a single, obvious purpose.

The benefits of defining components are comparable to the more general best practice of organizing your code into manageable pieces. It will help you understand how they relate to each other, it will promote reuse, and it will make your code easier to reason about, maintain, and extend.

But how do you know what should be split into its own component?

There are no hard rules for this. Some people prefer an intuitive approach and start looking at the markup and drawing boxes around every component and subcomponent that seems to have its own logic.

Other people apply the same techniques used for deciding if you should create a new function or object. One such technique is the single responsibility principle — that is, a component should ideally only do one thing. If it ends up growing, it should be split into smaller subcomponents.

Both approaches should complement each other, and help you decide how to better organize your components.

Eventually, we will split up our app into the following components:

Alert.svelte: A general notification box for communicating actions that have occurred.
NewTodo.svelte: The text input and button that allow you to enter a new todo item.
FilterButton.svelte: The All, Active, and Completed buttons that allow you to apply filters to the displayed todo items.
TodosStatus.svelte: The "x out of y items completed" heading.
Todo.svelte: An individual todo item. Each visible todo item will be displayed in a separate copy of this component.
MoreActions.svelte: The Check All and Remove Completed buttons at the bottom of the UI that allow you to perform mass actions on the todo items.

graphical representation of the list of components in our app

In this article we will concentrate on creating the FilterButton and Todo components; we'll get to the others in future articles.

Let's get started.

Note: In the process of creating our first couple of components, we will also learn different techniques to communicate between components, and the pros and cons of each.

Extracting our filter component

We'll begin by creating our FilterButton.svelte.

First of all, create a new file — components/FilterButton.svelte.

Inside this file we will declare a filter prop, and then copy the relevant markup over to it from Todos.svelte. Add the following content into the file:

<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>

Back in our Todos.svelte component, we want to make use of our FilterButton component. First of all, we need to import it — add the following line at the top of the Todos.svelte <script> section:
```
import FilterButton from './FilterButton.svelte'
```
Now, replace the filters <div> with a call to the FilterButton component, which takes the current filter as a prop — the below line is all you need:
```
<FilterButton {filter} />
```

Note: Remember that when the HTML attribute name and variable matches, they can be replaced with {variable}, that's why we could replace <FilterButton filter={filter} /> with <FilterButton {filter} />.

So far so good! Let's try out the app now. You'll notice that when you click on the filter buttons, they are selected and the style updates appropriately. But! We have a problem — the todos aren't filtered. That's because the filter variable flows down from the Todos component to the FilterButton component through the prop, but changes occurring in the FilterButton component don't flow back up to its parent — the data binding is one-way by default. Let's look at a way to solve this.

Sharing data between components: passing a handler as a prop

One way to let child components notify their parents of any changes is to pass a handler as a prop. The child component will execute the handler, passing the needed information as a parameter, and the handler will modify the parent's state.

In our case, the FilterButton component will receive an onclick handler from its parent. Whenever the user clicks on any filter button, the child will call the onclick handler, passing the selected filter as a parameter, back up to its parent.

We will just declare the onclick prop assigning a dummy handler to prevent errors, like this:

export let onclick = (clicked) => {}

And we'll declare the following reactive statement — $: onclick(filter) — to call the onclick handler whenever the filter variable is updated.

The <script> section of our FilterButton component should end up looking like this — update it now:

<script>
  export let filter = 'all'
  export let onclick = (clicked) => {}
  $: onclick(filter)
</script>

Now when we call FilterButton inside Todos.svelte we'll need to specify the handler. Update it like this:
```
<FilterButton {filter} onclick={ (clicked) => filter = clicked }/>
```

When any filter button is clicked, we just update the filter variable with the new filter. Now our FilterButton component will work again.

Easier two-way data binding with the bind directive

In the previous example we realized that our FilterButton component wasn't working because our application state was flowing down from parent to child through the filter prop — but it wasn't going back up. So we added an onclick prop to let the child component communicate the new filter value to its parent.

It works ok, but Svelte provides us an easier and more straightforward way to achieve two-way data binding. Data ordinarily flows down from parent to child using props. If we want it to also flow the other way — from child to parent — we can use the bind: directive.

Using bind, we will tell Svelte that any changes made to the filter prop in the FilterButton component should propagate back up to the parent component, Todos. That is, we will bind the filter variable's value in the parent to its value in the child.

In Todos.svelte, update the call to the FilterButton component as follows:
```
<FilterButton bind:filter={filter} />
```
As usual, Svelte provides us with a nice shorthand — bind:value={value} is equivalent to bind:value. So in the above example you could just write <FilterButton bind:filter />.
The child component can now modify the value of the parent's filter variable, so we no longer need the onclick prop. Modify your FilterButton <script> like this:
```
<script>
  export let filter = 'all'
</script>
```
Try your app again, and you should still see your filters working correctly.

Creating our Todo component

Now we will create a Todo component to encapsulate each individual todo — including the checkbox and some editing logic so you can change an existing todo.

Our Todo component will receive a single todo object as a prop. Let's declare the todo prop and move the code from the Todos component. Just for now, we'll replace the call to removeTodo with an alert. We'll add that functionality back in later on.

Create a new component file — components/Todo.svelte.

Put the following contents inside this file:

<script>
  export let todo
</script>

<div class="stack-small">
  <div class="c-cb">
    <input type="checkbox" id="todo-{todo.id}"
      on:click={() => todo.completed = !todo.completed}
      checked={todo.completed}
    />
    <label for="todo-{todo.id}" class="todo-label">{todo.name}</label>
  </div>
  <div class="btn-group">
    <button type="button" class="btn">
      Edit <span class="visually-hidden">{todo.name}</span>
    </button>
    <button type="button" class="btn btn__danger" on:click={() => alert('not implemented')}>
      Delete <span class="visually-hidden">{todo.name}</span>
    </button>
  </div>
</div>

Now we need to import our Todo component into Todos.svelte. Go to this file now, and add the following import statement below your previous one:
```
import Todo from './Todo.svelte'
```
Next, we need to update our {#each} block to include a <Todo> component for each todo, rather than the code that has been moved out to Todo.svelte. We are also passing the current todo object into the component as a prop.
Update the {#each} block inside Todos.svelte like so:
```
<ul role="list" class="todo-list stack-large" aria-labelledby="list-heading">
  {#each filterTodos(filter, todos) as todo (todo.id)}
    <li class="todo">
      <Todo {todo} />
    </li>
  {:else}
    <li>Nothing to do here!</li>
  {/each}
</ul>
```

The list of todos is displayed on the page, and the checkboxes should work (try checking/unchecking a couple, and then observing that the filters still work as expected), but our "x out of y items completed" status heading will no longer update accordingly. That's because our Todo component is receiving the todo via the prop, but it's not sending any information back to its parent. We'll fix this later on.

Sharing data between components: props-down, events-up pattern

The bind directive is pretty straightforward and allows you to share data between a parent and child component with minimal fuss. However, when your application grows larger and more complex it can easily get difficult to keep track of all your bound values. A different approach is the "props-down, events-up" communication pattern.

Basically, this pattern relies on child components receiving data from their parents via props and parent components updating their state by handling events emitted from child components. So props flow down from parent to child and events bubble up from child to parent. This pattern establishes a two-way flow of information, which is predictable and easier to reason about.

Let's look at how to emit our own events to re-implement the missing Delete button functionality.

To create custom events we'll use the createEventDispatcher utility. This will return a dispatch() function that will allow us to emit custom events. When you dispatch an event you have to pass the name of the event and, optionally, an object with additional information that you want to pass to every listener. This additional data will be available on the detail property of the event object.

Note: Custom events in Svelte share the same API as regular DOM events. Moreover, you can bubble up an event to your parent component by specifying on:event without any handler.

We'll edit our Todo component to emit a remove event, passing the todo being removed as additional information.

First of all, add the following lines to the top of the Todo component's <script> section:

import { createEventDispatcher } from 'svelte'
const dispatch = createEventDispatcher()

Now update the Delete button in the markup section of the same file to look like so:
```
<button type="button" class="btn btn__danger" on:click={() => dispatch('remove', todo)}>
  Delete <span class="visually-hidden">{todo.name}</span>
</button>
```
With dispatch('remove', todo) we are emitting a remove event, and passing as additional data the todo being deleted. The handler will be called with an event object available, with the additional data available in the event.detail property.
Now we have to listen to that event from inside Todos.svelte and act accordingly. Go back to this file and update your <Todo> component call like so:
```
<Todo {todo} on:remove={e => removeTodo(e.detail)} />
```
Our handler receives the e parameter (the event object), which as described before holds the todo being deleted in the detail property.
At this point, if you try out your app again, you should see that the Delete functionality now works again! So our custom event has worked as we hoped. In addition, the remove event listener is sending the data change back up to the parent, so our "x out of y items completed" status heading will now update appropriately when todos are deleted.

Now we'll take care of the update event, so that our parent component can get notified of any modified todo.

Updating todos

We still have to implement functionality to allow us to edit existing todos. We'll have to include an editing mode in the Todo component. When entering editing mode we'll show an <input> field to allow us to edit the current todo name, with two buttons to confirm or cancel our changes.

Handling the events

We'll need one variable to track whether we are in editing mode and another to store the name of the task being updated. Add the following variable definitions at the bottom of the <script> section of the Todo component:
```
let editing = false                     // track editing mode
let name = todo.name                    // hold the name of the todo being edited
```
We have to decide what events our Todo component will emit:
- We could emit different events for the status toggle and editing of the name. (e.g. updateTodoStatus and updateTodoName).
- Or we could take a more generic approach and emit a single update event for both operations.
We will take the second approach so we can demonstrate a different technique. The advantage of this approach is that later we can add more fields to the todos and still handle all updates with the same event.
Let's create an update() function that will receive the changes and will emit an update event with the modified todo. Add the following, again to the bottom of the <script> section:
```
function update(updatedTodo) {
  todo = { ...todo, ...updatedTodo }    // applies modifications to todo
  dispatch('update', todo)              // emit update event
}
```
Here we are using the spread syntax to return the original todo with the modifications applied to it.

Next we'll create different functions to handle each user action. When the Todo is in editing mode, the user can save or cancel the changes. When it's not in editing mode, the user can delete the todo, edit it, or toggle its status between completed and active.

Add the following set of functions below your previous function to handle these actions:

function onCancel() {
  name = todo.name                      // restores name to its initial value and
  editing = false                       // and exit editing mode
}

function onSave() {
  update({ name: name })                // updates todo name
  editing = false                       // and exit editing mode
}

function onRemove() {
  dispatch('remove', todo)              // emit remove event
}

function onEdit() {
  editing = true                        // enter editing mode
}

function onToggle() {
  update({ completed: !todo.completed}) // updates todo status
}

Updating the markup

Now we need to update our Todo component's markup to call the above functions when the appropriate actions are taken.

To handle the editing mode we are using the editing variable, which is a boolean. When it's true, it should display the <input> field for editing the todo name, and the Cancel and Save buttons. When it's not in editing mode it will display the checkbox, the todo name and the buttons to edit and delete the todo.

To achieve this we will use an if block. The if block conditionally renders some markup. Take into account that it won't just show or hide the markup based on the condition — it will dynamically add and remove the elements from the DOM, depending on the condition.

When editing is true, for example, Svelte will show the update form; when it's false, it will remove it from the DOM and add in the checkbox. Thanks to Svelte reactivity, assigning the value of the editing variable will be enough to display the correct HTML elements.

The following gives you an idea of what the basic if block structure looks like:

<div class="stack-small">
{#if editing}
  <!-- markup for editing todo: label, input text, Cancel and Save Button -->
{:else}
  <!-- markup for displaying todo: checkbox, label, Edit and Delete Button -->
{/if}
</div>

The non-editing section — that is, the {:else} part (lower half) of the if block — will be very similar to the one we had in our Todos component. The only difference is that we are calling onToggle(), onEdit(), and onRemove(), depending on the user action.

{:else}
  <div class="c-cb">
    <input type="checkbox" id="todo-{todo.id}"
      on:click={onToggle} checked={todo.completed}
    >
    <label for="todo-{todo.id}" class="todo-label">{todo.name}</label>
  </div>
  <div class="btn-group">
    <button type="button" class="btn" on:click={onEdit}>
      Edit<span class="visually-hidden"> {todo.name}</span>
    </button>
    <button type="button" class="btn btn__danger" on:click={onRemove}>
      Delete<span class="visually-hidden"> {todo.name}</span>
    </button>
  </div>
{/if}
</div>

It is worth noting that:

When the user presses the Edit button we execute onEdit(), which just sets the editing variable to true.
When the user clicks on the checkbox we call the onToggle() function, which executes update(), passing an object with the new completed value as a parameter.
The update() function emits the update event, passing as additional information a copy of the original todo with the changes applied.
Finally, the onRemove() function emits the remove event, passing the todo to be deleted as additional data.

The editing UI (the upper half) will contain an <input> field and two buttons to cancel or save the changes:

<div class="stack-small">
{#if editing}
  <form on:submit|preventDefault={onSave} class="stack-small" on:keydown={e => e.key === 'Escape' && onCancel()}>
    <div class="form-group">
      <label for="todo-{todo.id}" class="todo-label">New name for '{todo.name}'</label>
      <input bind:value={name} type="text" id="todo-{todo.id}" autoComplete="off" class="todo-text" />
    </div>
    <div class="btn-group">
      <button class="btn todo-cancel" on:click={onCancel} type="button">
        Cancel<span class="visually-hidden">renaming {todo.name}</span>
        </button>
      <button class="btn btn__primary todo-edit" type="submit" disabled={!name}>
        Save<span class="visually-hidden">new name for {todo.name}</span>
      </button>
    </div>
  </form>
{:else}
[...]

When the user presses the Edit button, the editing variable will be set to true, and Svelte will remove the markup in the {:else} part of the DOM and replace it with the markup in the {#if...} section.

The <input>'s value property will be bound to the name variable, and the buttons to cancel and save the changes call onCancel() and onSave() respectively (we added those functions earlier):

When onCancel() is invoked, name is restored to its original value (when passed in as a prop) and we exit editing mode (by setting editing to false).
When onSave() in invoked, we run the update() function — passing it the modified name — and exit editing mode.

We also disable the Save button when the <input> is empty, using the disabled={!name} attribute, and allow the user to cancel the edit using the Escape key, like this:

on:keydown={e => e.key === 'Escape' && onCancel()}.

We also use todo.id to create unique ids for the new input controls and labels.

The complete updated markup of our Todo component looks like the following. Update yours now:

<div class="stack-small">
{#if editing}
  <!-- markup for editing todo: label, input text, Cancel and Save Button -->
  <form on:submit|preventDefault={onSave} class="stack-small" on:keydown={e => e.key === 'Escape' && onCancel()}>
    <div class="form-group">
      <label for="todo-{todo.id}" class="todo-label">New name for '{todo.name}'</label>
      <input bind:value={name} type="text" id="todo-{todo.id}" autoComplete="off" class="todo-text" />
    </div>
    <div class="btn-group">
      <button class="btn todo-cancel" on:click={onCancel} type="button">
        Cancel<span class="visually-hidden">renaming {todo.name}</span>
        </button>
      <button class="btn btn__primary todo-edit" type="submit" disabled={!name}>
        Save<span class="visually-hidden">new name for {todo.name}</span>
      </button>
    </div>
  </form>
{:else}
  <!-- markup for displaying todo: checkbox, label, Edit and Delete Button -->
  <div class="c-cb">
    <input type="checkbox" id="todo-{todo.id}"
      on:click={onToggle} checked={todo.completed}
    >
    <label for="todo-{todo.id}" class="todo-label">{todo.name}</label>
  </div>
  <div class="btn-group">
    <button type="button" class="btn" on:click={onEdit}>
      Edit<span class="visually-hidden"> {todo.name}</span>
    </button>
    <button type="button" class="btn btn__danger" on:click={onRemove}>
      Delete<span class="visually-hidden"> {todo.name}</span>
    </button>
  </div>
{/if}
</div>

Note: We could further split this into two different components, one for editing the todo and the other for displaying it. In the end, it boils down to how comfortable you feel dealing with this level of complexity in a single component. You should also consider whether splitting it further would enable reusing this component in a different context.

To get the update functionality working, we have to handle the update event from the Todos component. In its <script> section, add this handler:
```
function updateTodo(todo) {
  const i = todos.findIndex(t => t.id === todo.id)
  todos[i] = { ...todos[i], ...todo }
}
```
We find the todo by id in our todos array, and update its content using spread syntax. In this case we could have also just used todos[i] = todo, but this implementation is more bullet-proof, allowing the Todo component to return only the updated parts of the todo.

Next we have to listen for the update event on our <Todo> component call, and run our updateTodo() function when this occurs to change the name and completed status. Update your <Todo> call like this:

{#each filterTodos(filter, todos) as todo (todo.id)}
  <li class="todo">
    <Todo {todo}
      on:update={e => updateTodo(e.detail)}
      on:remove={e => removeTodo(e.detail)}
    />
  </li>

Try your app again, and you should see that you can delete, add, edit, cancel editing of, and toggle completion status of todos! And our "x out of y items completed" status heading will now update appropriately when todos are completed.

As you can see, it's easy to implement the "props-down, events-up" pattern in Svelte. Nevertheless, for simple components bind can be a good choice; Svelte will let you choose.

Note: Svelte provides more advanced mechanisms to share information among components: the Context API and Stores. The Context API provides a mechanism for components and their descendants to "talk" to each other without passing around data and functions as props, or dispatching lots of events. Stores allows you to share reactive data among components that are not hierarchically related. We will look at Stores later on in the series.

The code so far

Git

To see the state of the code as it should be at the end of this article, access your copy of our repo like this:

cd mdn-svelte-tutorial/05-advanced-concepts

Or directly download the folder's content:

npx degit opensas/mdn-svelte-tutorial/05-advanced-concepts

Remember to run npm install && npm run dev to start your app in development mode.

REPL

To see the current state of the code in a REPL, visit:

https://svelte.dev/repl/76cc90c43a37452e8c7f70521f88b698?version=3.23.2

Summary

Now we have all of our app's required functionality in place. We can display, add, edit and delete todos, mark them as completed, and filter by status.

In this article, we covered the following topics: