Я создал простой компонент Banner, который импортируется в _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 предоставляет инструменты для тестирования компонентов и приложений.
Что ж, я не уверен в лучшем способе 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!');
...
Поскольку все элементы имеют ссылку на корневой компонент.