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

Posted 2023-03-07

【中文标题】等待组件在自定义 svelte 指令中准备就绪

【英文标题】：Wait for component to be ready in custom svelte directive

【发布时间】：2021-08-09 12:16:03

【问题描述】：

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

//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))

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

【问题讨论】：

您可以使用 Promise 来准备节点的状态并调用其 .then() 方法来调度您的自定义事件。

【参考方案1】：

您可以在操作中使用onMount 生命周期函数：

// 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;