PricingBlog

Nested Components & Events

  • ebud-1275339045421187072

    ebud

    1 year ago

    Hey! Currently learning how components work in Toddle, and had a question about how events work when nesting components.

    I created a simple button component with an event. When an element inside the component is clicked, the event is triggered. Now I can add this component to a page, and use it to update a variable when the event is triggered. This works great and I understand how everything is connected and how I can pass down attributes into the component from the parent etc.

    I also have a footer that will live on every page of my app. I've turned it into a component so I can easily update it across my entire app without needing to do it manually for each page.

    I started to get confused when I added the button component inside my footer. I can add my footer to a page, and see the button component inside of it. However when I'm on the page, it seems like I've lost access to the event in the button component. I can only see the event when I'm editing the footer component itself.

    I feel like I might be missing something / don't fully understand how either components or events work. I assumed the button component event would have been accessible on the page even if it was nested inside another component such as my footer.
  • Tod-1275339046746325026

    Tod

    1 year ago

    Great energy @ebud! Your continuous contribution to the toddle Community just made you advance to Community Level 1!
  • ebud-1275339362917290046

    ebud

    1 year ago

    Perhaps this is when context comes into play?
  • andreasmoller-1275340231716896859

    Andreas Møller

    1 year ago

    If the button is inside the component then you have to “re-trigger” the event from the footer element.

    Basically add and event on the footer component and trigger it when the buttons click event happens
  • andreasmoller-1275340533459582977

    Andreas Møller

    1 year ago

    Alternatively you might consider using a slot in the footer component.
    That way you can have the button be rendered inside the footer component, but it acts like a child of the parent. Does that make sense?
  • ebud-1275346086206246972

    ebud

    1 year ago

    Sounds like slots might be what I had in mind. Will read up on them, ty!
  • andreasmoller-1275346379564122213

    Andreas Møller

    1 year ago

    👍
  • ebud-1275351245112082572

    ebud

    1 year ago

    I believe I was overthinking everything. Turns out 'Actions' is what I was looking for!