时间戳

首页 > 解决方案 > 如何将 Svelte 应用程序用作另一个 Svelte 应用程序中的组件？

svelte - 如何将 Svelte 应用程序用作另一个 Svelte 应用程序中的组件？

问题描述

用例：我有几个 Svelte 组件被编译为标准 Svelte 应用程序（即，不是 Web 组件），然后用于增强主 Svelte 应用程序的功能。

我app = new SvelteApp({target, props})通过包装器/代理组件使用典型方法实例化它们（如this answer中所建议），以便我可以执行以下操作：

MainApp.svelte

<script>
    import ComponentWrapper from 'ComponentWrapper.svelte'

    const App1 = window.app1; // this is standalone/compiled Svelte app
</script>

<ComponentWrapper this={App1} prop1="one" prop2="two" />

ComponentWrapper.svelte

<script>
    import { onDestroy } from 'svelte';

    let component;
    export { component as this };

    let target;
    let cmp;

    const create = () => {
        cmp = new component( {
            target,
            props: $$restProps,
        } );
    };

    const cleanup = () => {
        if ( !cmp ) return;
        cmp.$destroy();
        cmp = null;
    };

    $: if ( component && target ) {
        cleanup();
        create();
    }

    $: if ( cmp ) {
        cmp.$set( $$restProps );
    }

    onDestroy( cleanup );
</script>

<div bind:this={target} />

这很好用，只是我无法使用其中的on:event={}指令ComponentWrapper或其中的div元素收听 App1 和 App2 调度的事件。

我的问题是：

  1. 有没有更好的方法来包含独立的 Svelte 应用程序？

  2. 我将如何使活动发挥作用？当然，我可以将方法作为道具传递并在独立应用程序中使用它，但如果可能的话，我宁愿调度/监听事件。

标签： sveltesvelte-3svelte-component

解决方案

  1. 有没有更好的方法来包含独立的 Svelte 应用程序？

应用程序和组件之间没有特别的区别。

<script>
const App1 = window.app1
</script>

<App1 prop1="one" prop2="two" />

可以工作，但这取决于应用程序是否使用相同的苗条运行时。（取决于应用程序的捆绑方式）

如果您可以使用svelte-kit package命令将应用程序生成为 lib，您可能想尝试一下 。

  1. 我将如何使活动发挥作用？

您可以将侦听器添加到事件并分派这些：

const dispatch = createEventDispatcher()
cmp.$on('eventname', (event) => {
  dispatch('eventname', event);
});

这将使用 CustomEvent 包装原始事件。我还没有找到按原样发出事件的方法。而且 Svelte 没有$$listeners像 Vue 一样的东西。所以你需要让 ComponentWrapper.svelte 知道要监听哪些事件。

像你建议的那样使用这些道具可能会更干净。

推荐阅读