Svelte - 访问子组件的方法

Posted 2023-02-19

【中文标题】Svelte - 访问子组件的方法

【英文标题】：Svelte - access child component's method

【发布时间】：2020-08-03 14:55:58

【问题描述】：

我有一个简单地隐藏内容的应用 Hidden.svelte:

<script>
    let shown = false;

    function show() 
        shown = true;
    
</script>

<svelte:options accessors=true/>

#if shown
    <slot/>
/if

家长App.svelte:

<script>
    import Hidden from 'Hidden';

    let child;
</script>

<Hidden bind:this=child>
    Content
</Hidden>

<button on:click=() => child.shown = true>Show</button>

因此，由于父级中的<svelte:options accessors=true/>，可以轻松设置子级的shown

但是，我想使用show() 方法，因为它不仅可以设置shown 的值，还可以执行一些魔法

感谢 Chrome 的 DevTools，我发现所有组件都有一个带有 props 和方法的 Array，可以通过一些 .$$.ctx 访问，因此可以像这样调用 Hidden 的 show() 方法：

<button on:click=() => child.$$.ctx[2]()>Show</button>

但是）你知道）有合法的方法吗？

【参考方案1】：

Hidden.svelte

<script>
    let shown = false;

    export function show() 
        shown = true;
    
</script>

#if shown
    <slot/>
/if

App.svelte

<script>
    import Hidden from './Hidden.svelte';

    let child;
</script>

<Hidden bind:this=child>
    Content
</Hidden>

<button on:click=() => child.show()>Show</button>

对child.show() 的调用实际上可以简化，但我认为这可能会使我们更难弄清楚示例中发生了什么。你可以这样做：

<button on:click=child.show>Show</button>