Svelte 当在组件a上单击按钮时，如何在组件B上呈现彼此无关的内容？

标题组件

<header>
    <li>hello board</li>
    <ul>
        <li>add a column</li>
        <li>manage tags</li>
        <li>settings</li>
    </ul>
</header>

{#if "add a column" is clicked}
...
{/if}

---

我想指出的是，这些组件相互独立，即，不是彼此的子组件或父组件。提前感谢您的回答：）

实现这一点的一种方法是在

标题

和

主

的公共父级中处理

isColumnClicked

变量（布尔值）

因此，您将为

Header

提供一个回调

onAddColumn

，当您单击列表项时将触发该回调：

Header.svelte：

导出let-onadd列；
你好，董事会

添加列
管理标签
背景

然后，

Main

组件应该从

isColumnClicked

获取值作为一个道具：

Main.svelte：

出口许可证；
{#如果单击}
玉湖

{/if}

公共父级（比如

App

）将协调

isColumnClicked

更新：

App.svelte：

从“/Header.svelte”导入标题；
从“/Main.svelte”导入Main；
让isColumnClicked=false；
{
isColumnClicked=true
}} 
/>

请参阅本文中的工作示例

---

编辑：

阅读您的评论后，您的意图更加清晰：

理想情况下，标题上的“添加列”按钮会在线路板（主区域）组件上创建列组件

对于这种类型的行为，您将不得不采用另一种逻辑，这种逻辑更适合于使用上述类似方法的组件体系结构

因此，您的所有组件都将由一个包含您的数据的公共对象进行编排（这里是一个包含所有列的列表）。例如，它将具有以下结构：

[
{
标题：“栏目标题”，
todos:[…todos对象的列表]
},
...
]

下一步是初始化处理此对象的存储。例如，您可以将

addColumn

功能添加到此存储：

board.js：

从“svelte/store”导入{writeable}；
常数emptyColumn={
标题：“新专栏”，
待办事项：[]
};
函数createBoardStore（）{
const{subscribe，set，update}=可写（[]）；
返回{
订阅
addColumn:（）=>{
更新（（board）=>[…board，emptyColumn]）；
},
重置：（）=>{
集合（[]）；
}
};
}
export const board=createBoardStore（）；

然后您的

Main

组件只需使用存储映射所有现有的

列

：

Main.svelte：

从“/stores/board.js”导入{board}”；
让你的价值；
const unsubscribe=board.subscribe（值=>{
boardValue=价值；
});
{#每个boardValue作为列}
{column.title}
{/每个}

因此，您的

标题

只需调用

addColumn

函数，因为

Main

组件对存储是反应式的：

Header.svelte：

从“/stores/board.js”导入{board}”；
你好，董事会

添加列
管理标签
背景

---

就像这样，你有一个干净的前端应用程序，它只依赖数据，而不依赖大量事件。这是到的链接。

您可以使用商店来进行此操作。非常感谢您的帮助。尽管我必须说这感觉很不直观，你不觉得吗？有没有其他方法可以做到这一点，因为我不明白为什么我们应该将道具传递给app.svelte，然后返回到其渲染的位置。有没有一种方法可以让一个组件直接将事件传递给另一个组件，而无需在相关组件之间传递道具？@rohanharikr您可以使用

createEventDispatcher

将事件从组件发送到父组件，但它本身不会在多个组件中冒泡。您也可以使用

setContext

和

getContext

，但我认为最好的方法是使用

store

，如其他评论中所述。Js自定义事件似乎也会在多个组件中冒泡。这里有一个例子：@rohanharikr我用更好的逻辑实现更新了我的答案：）@johannchopin这太棒了，谢谢。正是我要找的！