PricingBlog

how to pass information from component (child) to parent.

  • uunicode-1267245157334515733

    unicodes

    1 year ago

    I used attributes to communicate between, but now I have a value stored in a variable (from a component), how to communicate that value to the parent?
  • andreasmoller-1267246662481350719

    Andreas Møller

    1 year ago

    You use an event.
  • If two components share some state e.g. the value of a variable it should belong to the parent element, and be passed to the child as an attribute.
  • If the two components are siblings, you shoud have their shared parent own the state.
  • This way they can both read the state through their attribute, and if they want to change the sate they can emit events.
  • uunicode-1267406875926724628

    unicodes

    1 year ago

    This is my structure. Regarding the event management video https://www.youtube.com/watch?v=PS86gqmV6zI&t=64s, I have a p tag, and my event is as follows: When the p tag's value changes (like binding), save the value of p in the attribute value or somewhere accessible at the level of the button from the structure.
    1267406876006678578-Screenshot_2024-07-29_at_11.52.20.png
  • uunicode-1267419943385960511

    unicodes

    1 year ago

    I found that there are many event triggers for this action, such as a button click from a child, an API response, or a button from a parent. However, in any case, creating the event at the child level isn't visible at the parent level, and the parent level event isn't visible at the child level. This visibility is possible only for attributes, but it is not possible to store information in the attribute with the event.
  • uunicode-1267422278313050132

    unicodes

    1 year ago

    Here is my parent component.
    1267422278090625115-Screenshot_2024-07-29_at_12.59.16.png
  • here is the child component with the event click on button.
    1267422359153938542-Screenshot_2024-07-29_at_12.59.59.png
  • I want to take the value from sheduled-value (variable) and put it in the attribute value scheduled-value.
    1267422516020908167-Screenshot_2024-07-29_at_13.03.03.png
  • uunicode-1267422889423016028

    unicodes

    1 year ago

    In this case the event has no sens. I could be replaced directly by this.
    1267422889112768522-Screenshot_2024-07-29_at_13.05.33.png
  • uunicode-1267441367760769195

    unicodes

    1 year ago

    Solution found: In case this will help other people, the steps I used are:

    -Create an event in the child component. In the test value, replace “name” with relevant information “Your-value.
    -If there is an input, a button, or any event in the child component, click on it.
    -From the button/input event, add + and select your event.
    -Then click on the event -> function button and select the variable that has your value.
    -Go back to the parent. Here, you will not find your event anywhere. You have to click (but not open) the component or select it. By selecting it, you will be able to view the child component attributes and “Events.” Now that you know where to find it, close it.
    -Create a variable in the parent to store your child’s value.
    -Select the child component again, and click on the event.
    -In the event, select your parent variable. Inside the function (replace “name” with relevant information “Your-value), select “Your-value.
  • lucasg-1267492443264389302

    Lucas G

    1 year ago

    It’s all in the video linked above too
  • For a visual of it. Though it is with the old interface it is the same process
    🙏1