从 svelte 组件公开和调用方法的最佳实践
Best practice to expose and call methods from svelte component
我构建了一个在 _layout.html 中导入的简单横幅组件。它公开了 5 个方法(关闭、信息、警告、...)。
目前我正在使用商店来跟踪这些方法,如下面的 _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 方法。你所做的对我来说很好。你可以
oncreate() {
Object.assign(this, this.refs.banner);
//or assign the exposed methods to the root component in any way
}
...
this.root.success('Post saved!');
...
因为所有元素都引用了根组件。
我构建了一个在 _layout.html 中导入的简单横幅组件。它公开了 5 个方法(关闭、信息、警告、...)。
目前我正在使用商店来跟踪这些方法,如下面的 _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 方法。你所做的对我来说很好。你可以
oncreate() {
Object.assign(this, this.refs.banner);
//or assign the exposed methods to the root component in any way
}
...
this.root.success('Post saved!');
...
因为所有元素都引用了根组件。