Асинхронная загрузка компонентов Svelte в версии 3

Я хотел бы задать вам вопрос об обновлении простого примера с версии 2 до версии 3.

Этот пример загрузки асинхронного компонента svelte v2 работает (https://codesandbox.io/s/0ooo3z8nqp) , но этот, написанный для v3, не работает (https://codesandbox.io/s/615zv3xp33 ).

Есть подсказка? Спасибо!

Обновление: Мой вопрос касался преобразования следующего фрагмента кода из Svelte V2 в V3.

<script>
    export default {
      components: {},
      data() {
        return {
          ChatBox: null
        };
      },
      methods: {
        async loadChatbox() {
          const { default: ChatBox } = await import("./Chatbox.html");
          this.set({ ChatBox });
        }
      }
    };
</script>

svelte svelte-component
person Razvan    schedule 06.05.2019    source источник

Ответы (1)


arrow_upward
5
arrow_downward

В версии 3 Svelte вы можете назначить новое значение переменной напрямую, без использования set.

Вы можете присвоить переменной default другое имя, отличное от ChatBox, чтобы внешняя переменная не затенялась, а затем назначить ее напрямую.

let ChatBox;

async function loadChatBox() {
  const { default: Component } = await import("./ChatBox.svelte");
  ChatBox = Component;
}
person Tholle    schedule 06.05.2019