如何在Svelte中单击一个组件中的按钮并触发另一个组件中的事件？

问题描述

我对svelte还是陌生的，并且仍然在学习，但是我对似乎很简单的东西有些困惑。我正在使用svelte和Svelte Material UI创建具有Material设计外观的App。

我从一个简单的app bar和一个 slide-out menu开始。我遇到的问题是，在svelte Material UI文档中，导致菜单滑入和滑出的按钮是同一菜单组件的一部分： https://github.com/hperrin/svelte-material-ui/blob/master/site/src/routes/demo/menu.svelte

就我而言，我希望按钮成为我的应用栏组件的一部分，当我单击该按钮时，菜单组件应触发以滑出（或滑入）。

我已经看到了如何将属性（数据）从一个组件传递到另一个组件的示例，但没有看到如何将事件从一个组件传递到另一个组件的示例。

我尝试过的事情：

导出函数（似乎需要将脚本作为模块，如here所述）
导出一个布尔值，然后从外部进行更改（给我一个错误，我不记得它是什么了）

我的代码如下（使用“导出函数”方法）：

App.svelte

<script>
  import TopAppBar,{Row,Section,Title} from '@smui/top-app-bar';
  import IconButton from '@smui/icon-button';
  import AppMenu,{Toggle} from "./AppMenu.svelte";

  let prominent = false;
  let dense = true;
  let secondaryColor = false;
</script>


<TopAppBar variant="static" {prominent} {dense} color={secondaryColor ? 'secondary' : 'primary'}>
  <Row>
    <Section>
      <IconButton class="material-icons" on:click={Toggle}>menu</IconButton>
      <Title>Test app</Title>
    </Section>
    <Section align="end" toolbar>
      <IconButton class="material-icons" aria-label="Print this page">account_circle</IconButton>
      <IconButton class="material-icons" aria-label="Bookmark this page">home</IconButton>
    </Section>
  </Row>
</TopAppBar>
<AppMenu></AppMenu>
<div>
    Lorem ipsum dolor sit amet,consectetur adipiscing elit. Quisque tellus libero,semper at lobortis at,congue sit amet lorem. Aliquam porttitor varius sagittis. In non lorem lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra,per inceptos himenaeos. Pellentesque fringilla et nulla et tempus. Vestibulum pharetra tristique neque,non soDales massa dignissim vulputate. Sed eget leo tellus. Phasellus egestas gravida ante. 
</div>

Appmenu.svelte

<script>
  import Menu from '@smui/menu';
  import List,{Item,Separator,Text} from '@smui/list';
  import Button from '@smui/button';
  let menu;
  let clicked = 'nothing yet';
  let menustate = false;
</script>

<script context="module">
  export function Toggle(){
    menu.setopen(open = !open)
  }
</script>

    <div style="min-width: 100px;">
      <Button on:click={() => menu.setopen(true)}>Open Menu</Button>
      <Menu bind:this={menu}>
        <List>
          <Item on:SMUI:action={() => clicked = 'Cut'}><Text>Cut</Text></Item>
          <Item on:SMUI:action={() => clicked = 'copy'}><Text>copy</Text></Item>
          <Item on:SMUI:action={() => clicked = 'Paste'}><Text>Paste</Text></Item>
          <Separator />
          <Item on:SMUI:action={() => clicked = 'Delete'}><Text>Delete</Text></Item>
        </List>
      </Menu>
    </div>

感谢您的帮助

解决方法

您的示例应该起作用。这是导出函数的一个非常简单的示例：

//C.svelte
<script context="module">
export function myFunc() {
  console.log("myFunc")
}
</script>

// App.svelte
<script>
  import {myFunc} from "./C.svelte"
</script>
<h1 on:click={myFunc}>click me</h1>

我认为您应该通过一个非常简单的示例来学习此类内容，然后将它们组合到更复杂的程序中。我还建议您不要使用外部库，而是先学习带有本机元素的内容，因为这些库会隐藏内容，更改行为甚至包含错误。

虽然可以使用context="module"方法，但是在您的情况下，您可以轻松地将切换功能进一步向上传播。

让 MenuApp 导出切换功能
在 App 中，使用bind语法将您的 AppMenu 绑定到某些内容（ appMenu 吗？）
通过按钮在对象上调用toggle

<IconButton class="material-icons" on:click={appMenu.toggle}>menu</IconButton>

svelte svelte-3 svelte-component