Question

我想问您一个有关将一个简单示例从版本2更新到版本3的问题。

这个精简的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>

Answer 1

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

您可以将default命名为ChatBox以外的名称，以使外部变量不会被遮挡，然后直接为其分配。

let ChatBox;

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

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

1 个答案: