Лучшая практика для выставления и вызова методов из компонента svelte - PullRequest
Новая
       11

Лучшая практика для выставления и вызова методов из компонента svelte

0 голосов
/ 27 ноября 2018

Я создал простой компонент Banner, который импортируется в _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 сделать это.

1 Ответ

0 голосов
/ 03 января 2019

Ну, я не уверен, что лучше 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!');
...

Поскольку все элементы имеют ссылку на корневой компонент.

...