Svelte - 在页面和组件之间进行通信，而不直接包含它答案

【问题标题】：Svelte - communicate between pages and components without include it directlySvelte - 在页面和组件之间进行通信，而不直接包含它
【发布时间】：2021-06-18 06:34:47
【问题描述】：

我在 Svelte 有一个小问题，也许是别人碰到了这个东西。

我的应用程序结构如下：

在_layout.svelte 中，我导入了一个Banner 组件。在这里我应该有我浏览的每个页面的标题和描述。

如果我在第一页，请将标题和说明发送到横幅组件，如果我在该页面上，会发生同样的事情。

这个想法是页面不导入这个组件，所以它们之间并没有真正的交流。

你知道我该怎么做吗？

谢谢！

【问题讨论】：

标签： components svelte

【解决方案1】：

有几种方法可以做到这一点

一种是在_layout.svelte 中使用当前路径实际处理这个问题（但这非常有限，因为布局需要了解所有可能的页面）

另一种方法是从横幅模块中导出一个函数或存储，允许设置它。

<!-- Banner.svelte -->
<script context="module">
  import { writable } from 'svelte/store'
  export const title = writable('')
</script>

<h1>{$title}</h1>

<!-- AboutPage -->
<script>
  import { title } from 'Banner.svelte'
  title.set('About')
</script>

第三种方法是设置一个非常相似的结构，但在布局文件中存储并使用 set/getContext 将其提供给所有后代（横幅和 xxxPage 组件） .

我更喜欢第二种选择（导出的商店），因为它是最直接的选择。

【讨论】：

【解决方案2】：

我应该承认 Stephane 的回答是迄今为止最方便的（我遇到了类似的问题），但也有事件系统 - 基于 Svelte 或基于 DOM。您可以在没有任何静态关系的组件之间设置解耦通信。

由于您没有在此用例中构建任何组件层次结构，因此可以使用 DOM 事件：

Banner.svelte

<script type="text/javascript">
    import { onMount } from 'svelte';

    let title = '';

    function onTitleUpdated(customEventWithTitle) {
        title = customEventWithTitle.detail;
    }

    onMount(
        function () {
            document.addEventListener("titleUpdated", onTitleUpdated);

            return () => {
                document.removeEventListener("titleUpdated", onTitleUpdated);
            }
        }
    );
</script>

<h1>{title}</h1>

AboutPage.svelte

<script type="text/javascript">
    function onClick() {
        const titleUpdatedEvent = new CustomEvent("titleUpdated", {detail: "new title"});

        document.dispatchEvent(titleUpdatedEvent);
    }
</script>

回复：https://svelte.dev/repl/6f373acad4be4aad95f3340bc53d9bc2

但请注意：如果您决定使用来自 documentation 的基于 Svelte 的方式，此时 (3.35) 将无法通过“第三方”组件（即来自外部库），请参阅here。我希望我们有一个类似于$$restProps 的事件转发指令，类似于$$restEvents，这样事件就可以通过第三方组件冒泡，这些组件不在我们的“责任范围”内。

【讨论】：