从 svelte 组件公开和调用方法的最佳实践答案

【问题标题】：Best practice to expose and call methods from svelte component从 svelte 组件公开和调用方法的最佳实践
【发布时间】：2019-04-29 07:31:54
【问题描述】：

我构建了一个简单的横幅组件，它被导入到 _layout.html 中。它公开了 5 种方法（dismiss、info、warning、...）。

目前我正在使用商店来跟踪这些方法，如下面的 _layout.html 所示。

_layout.html

<main>
    <Banner ref:banner/>
    <svelte:component this={child.component} {...child.props} />
</main>

<script>
    export default {
        components: {
            Banner: '../components/Banner.html',
        },

        oncreate() {
            this.store.set({
                Banner: {
                    dismiss: this.refs.banner.dismiss,
                    danger: this.refs.banner.danger,
                    info: this.refs.banner.info,
                    success: this.refs.banner.success,
                    warning: this.refs.banner.warning
                }
            })
        }
    }

所以我可以像这样从应用程序的任何部分调用它们：

blog.html

...     
  this.store.get().Banner.success('Post saved!')        
} catch (err) {
  this.store.get().Banner.danger(err)
}
...

这很好，但我想知道这是否是最好的 Svelte 方法。

【问题讨论】：

我认为这个问题已经过时了，svelte 3 中似乎不再支持 ref:xxx：不再支持 ref 指令 — 使用 `bind:this={xxx}，也许是一个带有应该添加 svelte 2（或任何适用于此问题的问题）

标签： svelte svelte-component

【解决方案1】：

好吧，我不确定是否有更好的 Svelte 方式。你所做的对我来说看起来不错。你可以

oncreate() {
    Object.assign(this, this.refs.banner);
    //or assign the exposed methods to the root component in any way
}

...
this.root.success('Post saved!');
...

因为所有元素都引用了根组件。

【讨论】：