Comments (2)
While it's pretty easy to guess how to pass parameters using events, I kind of agree there is no "recommended" approach in the doc.
I believe what @MentalGear is trying to say (it's just a guess) is that previously using Svelte 4
<script>
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
</script>
<button on:click={() => dispatch('notify', 'detail value')}>Fire Event</button>
You could pass the value in the dispatch method ('detail value') and you would fetch it inside the event detail
property
<script>
function callbackFunction(event) {
console.log(`Notify fired! Detail: ${event.detail}`);
}
</script>
<Child on:notify={callbackFunction} />
Now with Svelte 5, there is no "documented" way on how you pass custom values and you also lose the "event" unless you pass it yourself.
<script>
let { onclick } = $props();
let count = $state(0);
function handleClick(e) {
count++;
onclick?.(count);
}
</script>
<button onclick={handleClick}>
clicks: {count}
</button>
<script>
function callbackFunction(count) {
console.log(`Click fired! New value: ${count}`);
}
</script>
<Child onclick={callbackFunction} />
from svelte.
I don't know what exactly you mean. Can you clarify? (It sounds like you mean https://svelte-5-preview.vercel.app/docs/event-handlers#bubbling-events, which is already described)
from svelte.
Related Issues (20)
- Inconsistent behavior of `let` directive in combination with snippets HOT 3
- Svelte 5: `<tr>` is invalid inside `<table>` HOT 2
- Svelte 5: hydration error on each with 0 elements on the server and some elements on the client
- Memory leak on component unmount HOT 1
- Svelte 5: post increment/decrement of proxy property is miscompiled HOT 1
- Svelte 5: How to fix svelte/internal which was a private module used by Svelte 4 components that no longer exists in Svelte 5 HOT 2
- Rename `legacy.componentApi` to `compatibility.classComponent` HOT 1
- enhancement(custom element): svelte 5 should automatically set converters based on types
- [svelte5] use $state infinite loop bug > effect_update_depth_exceeded HOT 4
- bindable props "is declared but its value is never read" HOT 1
- Directive shorthand syntax is too lenient and can generate invalid code HOT 2
- $props & $derived should use let instead of const HOT 3
- This 'for each' case doesn't work HOT 2
- `$derived.by` not working as expected outside Svelte components HOT 2
- bug(repl): broken onclick `e.preventDefault()` in svelte 5 REPL HOT 1
- Svelte 5, I'm using `$state.snapshot` but a nested array is still a `Proxy`
- Calculated CSS unit HOT 2
- `read_pattern` fails if brackets are in strings etc HOT 2
- Expose `set_raf` in Svelte 5 HOT 1
- Svelte 5 Next 164: FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svelte.