admin 管理员组文章数量: 1086019
I want to create a ponent that will handle on:click, but without exporting an handleClick function; this is how it works right now
button.svelte:
<script lang="ts">
export let handleClick: ((e: MouseEvent) => void ) | undefined = undefined
</script>
<button on:click={handleClick}>
<slot></slot>
</button>
app.svelte:
<script lang="ts">
import Button from '$lib/button/button.svelte'
</script>
<Button handleClick={() => console.log('click!')}>
Click me!
</button>
How to change the Button element to use on:click directly in the app ponent?
app.svelte:
<Button on:click={handleClick}>
<slot></slot>
</Button>
I want to create a ponent that will handle on:click, but without exporting an handleClick function; this is how it works right now
button.svelte:
<script lang="ts">
export let handleClick: ((e: MouseEvent) => void ) | undefined = undefined
</script>
<button on:click={handleClick}>
<slot></slot>
</button>
app.svelte:
<script lang="ts">
import Button from '$lib/button/button.svelte'
</script>
<Button handleClick={() => console.log('click!')}>
Click me!
</button>
How to change the Button element to use on:click directly in the app ponent?
app.svelte:
<Button on:click={handleClick}>
<slot></slot>
</Button>
1 Answer
Reset to default 10As per the Svelte documentation:
If the
on:directive is used without a value, the ponent will forward the event, meaning that a consumer of the ponent can listen for it.
So you should be able to do this in button.svelte:
<button on:click>
<slot></slot>
</button>
And then this should work in app.svelte:
<script>
import Button from './button.svelte';
const handleClick = (event) => {
// …
};
</script>
<Button on:click={handleClick}>
Foo
</Button>
本文标签： javascriptSvelte how to pass on event to a child componentStack Overflow
版权声明：本文标题：javascript - Svelte: how to pass `on:` event to a child component - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744005916a2517283.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论