我构建了一个简单的横幅组件,该组件被导入到 _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
}
})
}
}
所以我可以从应用程序的任何部分调用它们,如下所示:
博客.html
...
this.store.get().Banner.success('Post saved!')
} catch (err) {
this.store.get().Banner.danger(err)
}
...
这工作正常,但我想知道这是否是最好的 Svelte 方法。