来自组件脚本的Svelte转发事件
我想知道如何从Svelte的函数中转发一个事件。
例如，我有一个App.svelte和一个Component.svelte文件。Component.svelte是一个按钮组件。我想处理on:单击这样的事件：
<script>
function handle(e){ /** Do things */ - /** Forward Event */ }
</script>
<button on:click={handle}/>所以我也可以从App.svelte文件中获取事件
<script>
import Button from './component.svelte'
function handle(e){ /** Do something */ }
</script>
<div>
<Button on:click={handle}/>
</div>我知道您可以通过填充on:click属性来转发component.svelte文件中的事件，而不需要指定要调用的函数。但对于我的情况，我需要在我的组件内部进行一些内部逻辑。还是我真的需要为此创建自定义事件处理程序？
(谢谢你的帮助:)
回答 3
Stack Overflow用户
发布于 2020-10-10 19:33:44
还是我真的需要为此创建自定义事件处理程序？
不，如果单击是您想要侦听的全部内容，但您希望在组件中执行逻辑并将单击传递给父程序，则不需要自定义事件。
Svelte允许您添加多少:点击的，你想要的。因此，其中一个:单击可以是空的，并将单击处理程序传递给父处理程序，另一个可以处理组件的内部函数/逻辑。
<button on:click={internalFunction} on:click>Something</button>这里有一个REPL显示了它的工作原理，当我只需要知道两个组件中的单击时，我通常使用它来避免使用createEventDispatcher的样板。当然，如果您需要单击在子节点中执行某些操作，然后会发生一些其他事情，则会通知父程序，那么您将需要分派事件，但这对您的示例是有效的。
Stack Overflow用户
发布于 2020-10-10 12:43:35
我不确定我的理解是否正确。您可以在您的函数中处理您的自定义逻辑，然后只需向前分派click。
在你的组成部分中：
<script>
import { createEventDispatcher } from 'svelte'
const dispatch = createEventDispatcher()
function handle(e){
console.log(”comp”)
dispatch('click', e)
}
</script>
<button on:click={handle}>test</button>Stack Overflow用户
发布于 2020-10-10 12:45:07
您正在寻找的是createEventDispatcher，它允许您“手动”触发事件。所以你要做的是：
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
function handle(e) {
// do stuff
dispatch('my-event', data);
}现在您可以使用on:my-event收听此事件(请注意，这很可能是在:单击或其他)，传入该事件的data可以作为ev.detail访问。
https://stackoverflow.com/questions/64293393
复制相似问题
腾讯云开发者
