How to click a button in one component and trigger an event in another component in Svelte?

Question

I'm quite new to Svelte and still learning, but I'm kind of stuck at something that seems quite simple. I'm using Svelte and Svelte Material UI to create an app with a Material design look and feel.

I've started with a simple app bar and a slide-out menu. The problem I'm running in to is that in the Svelte Material UI docs, the button that causes the menu to slide in and out, is part of the same menu component: https://github.com/hperrin/svelte-material-ui/blob/master/site/src/routes/demo/menu.svelte

In my case, I would like the button to be part of my App-bar component and when I click that, the menu component should trigger to slide out (or in).

I've seen examples of how to pass properties (data) from one component to the other, but not how to trigger an event from one component to the other.

What I've tried:

• exporting a function (seems to need the script to be a module, as described here)
• exporting a boolean, and changing it from the outside (gives me an error I don't remember exactly what it was)

My code is as follows (using the "exporting a function" method):

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>

Any help is appreciated

Answer 1

While using the context="module" approach would work, in your case you can easily just propagate the toggle function further up.

Let have MenuApp export the toggle function
In App use the bind syntax to bind your AppMenu to something (appMenu ?)
Call toggle on the object from your button

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