版本 3 中的 Svelte 组件异步加载答案

【问题标题】：Svelte component async loading in version 3版本 3 中的 Svelte 组件异步加载
【发布时间】：2019-09-24 09:03:21
【问题描述】：

我想问你一个关于将简单示例从版本 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

【解决方案1】：

在 Svelte 版本 3 中，您可以直接为变量分配新值，而无需使用 set。

您可以将default 命名为ChatBox 以外的名称，这样外部变量就不会被隐藏，然后直接分配给它。

let ChatBox;

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

【讨论】：