javascript - 等待组件在自定义 svelte 指令中准备就绪

Question

我最近尝试编写一个自定义指令，该指令执行一些逻辑并将事件分派(dispatch)回使用它的元素。

//svelte file
<div use:customDiective on:success={handleSuccess}>...</div>

// Custom directive
export const customDirective = node => {
    //some synchronous logic here

    node.dispatchEvent(new CustomEvent('success', node))
}

我发现，由于我的指令中的逻辑是同步的，它会在节点准备好捕捉新的自定义事件之前分派(dispatch)它。我能够使用 setTimeout() 轻松解决它，但这似乎不是一个合适的解决方案。有没有什么方法可以让我在指令中使用生命周期方法或其他方法来确保组件已准备好接收分派(dispatch)的事件？

Answer 1

您可以使用 onMount Action 中的生命周期函数:

// directive.js
import { onMount } from 'svelte';

export const customDirective = (node) => {
    onMount(() => {
        // other logic
        node.dispatchEvent(new CustomEvent('success', node));
    });     
}

<!-- App.svelte -->
<script>
    import { customDirective } from './directive.js';
    
    let isSuccess = false;
</script>

<div use:customDirective on:success={() => (isSuccess = true)}>{isSuccess}</div>

或者，如果您将 on: 指令放在 use: 指令之前，事件监听器将在运行操作之前设置。

<div on:success={() => (isSuccess = true)} use:customDirective>{isSuccess}</div>

您可以在生成的 Svelte 代码中看到指令的顺序:

// on: before use:
if (!mounted) {
    dispose = [
        listen(div, "success", /*success_handler*/ ctx[1]),
        action_destroyer(customDirective_action = customDirective.call(null, div))
    ];

    mounted = true;
}

// use: before on:
if (!mounted) {
    dispose = [
        action_destroyer(customDirective_action = customDirective.call(null, div)),
        listen(div, "success", /*success_handler*/ ctx[1])
    ];

    mounted = true;
}