Component events (createEventDispatcher) in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when the child component dispatches an event?

Consider a Svelte child component that uses createEventDispatcher to send a 'notify' event with a message. The parent listens to this event. What will the parent display after the child dispatches?

Svelte

/* Child.svelte */
<script>
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();
  function send() {
    dispatch('notify', { message: 'Hello from child' });
  }
</script>
<button on:click={send}>Send</button>

<!-- Parent.svelte -->
<script>
  import Child from './Child.svelte';
  let msg = '';
  function handleNotify(event) {
    msg = event.detail.message;
  }
</script>
<Child on:notify={handleNotify} />
<p>{msg}</p>

A <p>Hello from child</p>

B <p>undefined</p>

C <p></p>

D Runtime error: event.detail is undefined

💡 Hint

Remember that dispatch sends an event with a detail property containing the data.

The child dispatches a 'notify' event with { message: 'Hello from child' }. The parent handler receives the event and sets msg to event.detail.message, so the paragraph shows 'Hello from child'.

📝 Syntax

intermediate

Which option correctly dispatches a custom event with data in Svelte?

Choose the correct syntax to dispatch a 'change' event with a payload { value: 42 } using createEventDispatcher.

Svelte

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

// Which line correctly dispatches the event?

A dispatch('change', [value: 42]);

B dispatch('change', value: 42);

C dispatch('change', value = 42);

D dispatch('change', { value: 42 });

💡 Hint

The second argument to dispatch must be an object with the data.

Option D correctly passes an object with the property value. Other options have invalid syntax or wrong argument types.

🔧 Debug

advanced

Why does the parent not receive the dispatched event?

A child component dispatches a 'submit' event, but the parent never reacts. What is the likely cause?

Svelte

<!-- Child.svelte -->
<script>
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();
  function submit() {
    dispatch('submit', { data: 123 });
  }
</script>
<button on:click={submit}>Submit</button>

<!-- Parent.svelte -->
<script>
  import Child from './Child.svelte';
  let received = false;
  function onSubmit() {
    received = true;
  }
</script>
<Child on:submit={onSubmit} />
<p>{received ? 'Event received' : 'Waiting...'}</p>

A The child dispatches 'submit' but the parent component is missing the import of Child.

B The parent uses 'on:submit' but the child dispatches 'submit' event correctly; issue is elsewhere.

C The child dispatches 'submit' but the parent listens to 'onsubmit' (wrong event name).

D The parent event handler 'onSubmit' does not accept the event parameter, causing failure.

💡 Hint

Check if the parent component properly imports and uses the child component.

If the parent does not import or include the child component correctly, the event will never be dispatched to the parent. The event name and handler are correct, so the missing import is the likely cause.

❓ state_output

advanced

What is the value of count after dispatching an event?

In this Svelte parent component, the child dispatches an 'increment' event. The parent updates count accordingly. What is the final value of count after clicking the button once?

Svelte

<!-- Child.svelte -->
<script>
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();
  function inc() {
    dispatch('increment', { amount: 5 });
  }
</script>
<button on:click={inc}>Add 5</button>

<!-- Parent.svelte -->
<script>
  import Child from './Child.svelte';
  let count = 0;
  function handleIncrement(event) {
    count += event.detail.amount;
  }
</script>
<Child on:increment={handleIncrement} />
<p>{count}</p>

A NaN

B 0

C 5

D undefined

💡 Hint

The event detail contains the amount to add to count.

The child dispatches 'increment' with { amount: 5 }. The parent adds this to count, so after one click, count is 5.

🧠 Conceptual

expert

Why use createEventDispatcher instead of props for child-to-parent communication?

In Svelte, what is the main advantage of using createEventDispatcher for child-to-parent communication compared to passing callback functions as props?

A Props cannot pass functions in Svelte, so events are the only way.

B Events allow decoupling so the child does not need to know about the parent's implementation details.

C Using events is faster because props cause unnecessary re-renders.

D Events automatically update the parent's state without handlers.

💡 Hint

Think about how events help keep components independent.

Using createEventDispatcher lets the child send messages without knowing what the parent does with them. This keeps components loosely connected and easier to maintain. Props with callbacks require the child to know about the parent's functions.