> Canonical URL: https://codingcat.dev/course/svelte/lesson/component-events-forwarding # Learn Svelte: The Ultimate Guide - Component Events and Forwarding | Learn Svelte: The Ultimate Guide | CodingCat.dev Course [🧶 Learn Svelte: The Ultimate Guide](/course/svelte)Section 1.7 · Lesson 7 of 14[![](/logos/tags/svelte-symbol-light.svg)![](/logos/tags/svelte-symbol-dark.svg)Svelte](/topic/svelte)[← Prev Lesson](/course/svelte/lesson/basic-events)[Next Lesson →](/course/svelte/lesson/conditionals-and-loops) # Learn Svelte: The Ultimate Guide - Component Events and Forwarding ![](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/91a55d00d95d4f1fd657ecc81510390fc3a3e956-1920x1080.png?w=1920&h=1080&q=82&fit=max&auto=format)[@CodingCatDev62.5K / 100K Subscribers Goal](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Subscribe on YouTube→](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Watch on YouTube App ↗](https://www.youtube.com/watch?v=ZW8hGGwLB3Q&list=UUnKZ8gEb78zXKMi1ns-IQ2g)Lesson 7 / 14Course Lessons Outline▾1Svelte - [1.1Learn Svelte: The Ultimate Guide - What is Svelte?](/course/svelte/lesson/what-is-svelte) - [1.2Learn Svelte: The Ultimate Guide - Getting Started](/course/svelte/lesson/getting-started) - [1.3Learn Svelte: The Ultimate Guide - Starting to Code](/course/svelte/lesson/starting-to-code) - [1.4Learn Svelte: The Ultimate Guide - Components and Props](/course/svelte/lesson/components-and-props) - [1.5Learn Svelte: The Ultimate Guide - Inputs Bindings and Reactivity](/course/svelte/lesson/inputs-bindings-and-reactivity) - [1.6Learn Svelte: The Ultimate Guide - Basic Events](/course/svelte/lesson/basic-events) - [1.7Learn Svelte: The Ultimate Guide - Component Events and Forwarding](/course/svelte/lesson/component-events-forwarding) - [1.8Learn Svelte: The Ultimate Guide - Conditionals and Loops](/course/svelte/lesson/conditionals-and-loops) - [1.9Learn Svelte: The Ultimate Guide - CSS Basics](/course/svelte/lesson/css-basics) - [1.10Learn Svelte: The Ultimate Guide - How to call an API](/course/svelte/lesson/how-to-call-an-api) - [1.11Learn Svelte: The Ultimate Guide - Await Block](/course/svelte/lesson/await-block) - [1.12Learn Svelte: The Ultimate Guide - Transitions and Animations](/course/svelte/lesson/transitions-and-animations) - [1.13Learn Svelte: The Ultimate Guide - Component Lifecycle](/course/svelte/lesson/component-lifecycle) - [1.14Learn Svelte: The Ultimate Guide - Data Stores](/course/svelte/lesson/data-stores) ## Svelte Component Events and Forwarding Events Svelte is a modern JavaScript framework that is quickly gaining popularity among web developers. One of the things that makes Svelte so powerful is its component-based architecture. Components are reusable pieces of code that can be used to build complex user interfaces. In this blog post, we will discuss Svelte component events and forwarding events. We will learn how to create component events, how to forward component events, and how to use component events to communicate between components. ## What are Svelte Component Events? Svelte component events are custom events that can be emitted by components. Component events can be used to communicate between components and to trigger other events. To create a component event, we use the `on:eventname` directive. The `on:eventname` directive takes a function as its value. The function will be called whenever the event is emitted. For example, the following code creates a component event called `click`: Copied! 🐾 " aria-label="Copy code" title="Copy code to clipboard"> ``` { // do something when the button is clicked }} > Click Me! ``` ## How to Forward Component Events Svelte components can forward component events to their parent components. To forward a component event, we use the `emit:eventname` directive. The `emit:eventname` directive takes a value as its value. The value will be passed to the event handler when the event is emitted. For example, the following code forwards the `click` event to the parent component: Copied! 🐾 " aria-label="Copy code" title="Copy code to clipboard"> ``` { // do something when the button is clicked this.$emit('click'); }} > Click Me! ``` ## How to Use Component Events to Communicate Between Components Svelte component events can be used to communicate between components. To use component events to communicate between components, we need to create a component event in one component and forward the event to the other component. For example, the following code creates a component event called `click` in the `Button` component and forwards the event to the `App` component: Copied! 🐾 ``` import App from './App.svelte'; export default { name: 'Button', on:click={() => { // do something when the button is clicked this.$emit('click'); }} }; ``` Copied! 🐾 ``` import Button from './Button.svelte'; export default { name: 'App', on:click={() => { // do something when the button is clicked }} }; ``` In this example, the `Button` component emits the `click` event when the button is clicked. The `App` component listens for the `click` event and calls a function when the event is emitted. ## Conclusion Svelte component events are a powerful way to communicate between components. By understanding how to use component events, we can build web applications that are both interactive and responsive. ✏️ Visual Architecture Diagram ## how this course connects together. Follow AJ through the uml class topology from input contract to production output. Let’s build it!✏️ Architecture Diagram: Learn Svelte: The Ultimate Guide: Learn Svelte: …UML CLASS & RIG DIAGRAMARCHITECTURE DIAGRAM[Diagram Walkthrough]Content-driven uml-class diagram for Learn Svelte: The Ultimate Guide: Learn Svelte: The Ultimate Guide - Component Events and Forwarding: Svelte -> Learn Svelte: The Ultimate Guide -> Learn Svelte.AAA Contrast Verified ## related deep dives. [View All→](/blog)[![yt-dlp & Librosa: Reference Visual Grammar & 120 BPM Beat Extraction](https://cdn.sanity.io/images/hfh83o0w/production/929512d720fe800ce081851546bae7d1340e6c25-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/yt-dlp-librosa-reference-beat-extraction)November 4, 2026[![](/logos/tags/typescript-symbol-light.svg)![](/logos/tags/typescript-symbol-dark.svg)TypeScript](/topic/typescript)[#AI & Agents](/topic/ai)[![](/logos/tags/python-symbol-light.svg)![](/logos/tags/python-symbol-dark.svg)Python](/topic/python) ### [yt-dlp & Librosa: Reference Visual Grammar & 120 BPM Beat Extraction](/course/yt-dlp-librosa-reference-beat-extraction) Never animate in a vacuum. Learn how to pull reference clips with yt-dlp, slice 0.5s grammar frames into `style_guide.md`, and extract exact musical beats (`beats.json`) with Librosa. [![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![HyperFrames: Turning HTML & Canvas into 60fps Video for AI Agents](https://cdn.sanity.io/images/hfh83o0w/production/d2e98ad8352ec6a3edba735e8fbf8cda6151201f-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/hyperframes-html-to-video-agents)November 4, 2026[![](/logos/tags/typescript-symbol-light.svg)![](/logos/tags/typescript-symbol-dark.svg)TypeScript](/topic/typescript)[#AI & Agents](/topic/ai)[![](/logos/tags/react-symbol-light.svg)![](/logos/tags/react-symbol-dark.svg)React](/topic/react) ### [HyperFrames: Turning HTML & Canvas into 60fps Video for AI Agents](/course/hyperframes-html-to-video-agents) Learn how HeyGen's open-source HyperFrames compiler turns self-contained HTML, CSS, and Canvas compositions into deterministic 1080p60 videos built by AI agents. [![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[Course Outline](/course/svelte) ## Learn Svelte: The Ultimate Guide 7/141 ### Svelte - [1.1Learn Svelte: The Ultimate Guide - What is Svelte?](/course/svelte/lesson/what-is-svelte) - [1.2Learn Svelte: The Ultimate Guide - Getting Started](/course/svelte/lesson/getting-started) - [1.3Learn Svelte: The Ultimate Guide - Starting to Code](/course/svelte/lesson/starting-to-code) - [1.4Learn Svelte: The Ultimate Guide - Components and Props](/course/svelte/lesson/components-and-props) - [1.5Learn Svelte: The Ultimate Guide - Inputs Bindings and Reactivity](/course/svelte/lesson/inputs-bindings-and-reactivity) - [1.6Learn Svelte: The Ultimate Guide - Basic Events](/course/svelte/lesson/basic-events) - [1.7Learn Svelte: The Ultimate Guide - Component Events and Forwarding▶](/course/svelte/lesson/component-events-forwarding) - [1.8Learn Svelte: The Ultimate Guide - Conditionals and Loops](/course/svelte/lesson/conditionals-and-loops) - [1.9Learn Svelte: The Ultimate Guide - CSS Basics](/course/svelte/lesson/css-basics) - [1.10Learn Svelte: The Ultimate Guide - How to call an API](/course/svelte/lesson/how-to-call-an-api) - [1.11Learn Svelte: The Ultimate Guide - Await Block](/course/svelte/lesson/await-block) - [1.12Learn Svelte: The Ultimate Guide - Transitions and Animations](/course/svelte/lesson/transitions-and-animations) - [1.13Learn Svelte: The Ultimate Guide - Component Lifecycle](/course/svelte/lesson/component-lifecycle) - [1.14Learn Svelte: The Ultimate Guide - Data Stores](/course/svelte/lesson/data-stores) @CodingCatDev on YouTube62.5K / 100K Subscribe for new course lessons and architecture deep dives every week. [Subscribe for New Lessons →](https://www.youtube.com/@codingcatdev?sub_confirmation=1)