Динамическая загрузка компонента с использованием импорта или выборки - PullRequest
Новая
       2

Динамическая загрузка компонента с использованием импорта или выборки

1 голос
/ 03 июня 2019

Есть ли способ динамически импортировать компоненты в svelte, используя fetch или import?Может быть файл svelte или файл модуля, созданный из разделяемого компонента (все еще не знаю, как это работает).очень новый с svelte и очень взволнован.

Я нашел некоторый код в stackoverflow, который работал для v2.Вот ссылка 


<button on:click="loadChatbox()">
  chat to a customer service representative
</button>

{#if ChatBox}
  <svelte:component this={ChatBox}/>
{/if}

<script>
  export default {
    methods: {
      async loadChatbox() {
        const { default: Chatbox } = await import('./Chatbox.html');
        this.set({ Chatbox });
      }
    }
  };
</script>

1 Ответ

3 голосов
/ 04 июня 2019

Та же функциональность существует в Svelte 3, но вам нужно только назначить динамически импортируемый компонент обычной переменной, которую вы используете для свойства this в svelte:component.

Пример( REPL ) 

<!-- App.svelte -->
<script>
  let Chatbox;

  function loadChatbox() {
    import('./ChatBox.svelte').then(res => Chatbox = res.default)
  }
</script>

<button on:click="{loadChatbox}">Load chatbox</button>
<svelte:component this="{Chatbox}" />

<!-- ChatBox.svelte -->
<h1>Dynamically loaded chatbox</h1>
<input />
...