Как вызвать метод текущего компонента svelte: component? - PullRequest
Новая
       6

Как вызвать метод текущего компонента svelte: component?

0 голосов
/ 25 мая 2020

У меня есть базовое c приложение с некоторыми компонентами, у которых есть метод publi c load. В некоторых действиях я бы хотел вызвать этот метод для текущего компонента svelte :, но я не знаю, как получить ссылку на экземпляр компонента. Как это сделать? 

    <script>
        import router from 'page'
        import Wines from './pages/Wines.svelte'
        import Entry from './pages/Entry.svelte'
        import TitleBar from './components/TitleBar.svelte'

        let page,
            params

        router('/', () => page = Wines)
        router('/wines', () => page = Wines)
        router('/entry/:id?', (ctx, next) => {
            params = ctx.params
            next()
        }, () => page = Entry)

        async function forceSync(){
            // how to call current component instance?
        }

    </script>

    <main>
        <TitleBar on:sync-request={forceSync}></TitleBar>
        <svelte:component this={page} params={params}/>
    </main>

Ответы [ 2 ]

2 голосов
/ 26 мая 2020

Вы можете использовать bind:this, чтобы получить ссылку на текущий компонент и присвоить ее переменной. Это также работает для компонентов, отображаемых с помощью <svelte:component>, поэтому вы можете организовать свой код, подобный: 

<script>
  import Child from './Child.svelte'

  let cmp

  const func = () => {
    // use cmp here: cmp.load()
  }
</script>

<svelte:component this="{Child}" bind:this="{cmp}" />
0 голосов
/ 26 мая 2020

Я почти уверен, что мы не можем получить доступ к функциям в скриптах компонентов. Я не нашел никаких подсказок по API и не смог найти ни одного из методов через devTools.

См. Правку ниже

Но мы можем отправлять функции через настраиваемые события, и вы можете решить свое требование следующим образом:

App.svelte 

<script>
    import A from './A.svelte'
    const syncMethods = []

    function sync() {
        syncMethods.forEach(f => f());
    }

    function storeSyncHandler(event) {
        syncMethods.push(event.detail);
    }
</script>

<button on:click={sync}>Sync Components</button>
<A on:mounted={storeSyncHandler}/>

A.svelte 

<script>
    import { createEventDispatcher, onMount} from 'svelte';
    const dispatch = createEventDispatcher();

    let synced = ''

    function sync() {
        synced = '[SYNCED]';
    }

    onMount(() => {
        dispatch('mounted', sync)
    })
</script>

<div>Syncable Component {synced}</div>

Дочерний компонент отправляет ' смонтированное событие с помощью метода syn c. Родитель хранит это и может вызывать его при необходимости. Надеюсь, это поможет или даст какие-то идеи.

Вот REPL: https://svelte.dev/repl/6bc923a8326643cca79a6a2f8ee0ffe0?version=3.22.3

Изменить:

Это работает как шарм, когда мы экспортируем на другом компоненте.

Вот рабочий REPL для вызова методов на смонтированных компонентах:

https://svelte.dev/repl/8ba4270a9e334f35a591cdbfbac70e8e?version=3.22.3

...