Child to Parent Communication in LWC [closed]

Question

I have cascaded components like component inside component, as per LWC documentation in order to avoid mutation the public properties (@api) of child component can't be updated.

   comp1
    <template>
         <c-comp2 config={config}></c-comp2>
    </template>

    comp2
    <template>
         <c-comp3 config={config}></c-comp3>
    </template>

    comp3
    ----
    comp3.js
     handleChange(event) {
         fireEvent(this.pageRef, 'searchKeyChange', 'value':event.detail.value});
    }

comp1.js
@api config;
handleSearchKeyChange(searchKey) {
     this.config = searchKey
}

In comp3 i am performing some operations and now i want to update the config, i tried to update in the same component but it didn't work.

Created a pubSub event in comp3 and passing changed data to comp1 so that i will have updated data but no luck :(

Please let me know if anyone has faced this issue and how to handle such situation?

Answer 1

If they are parent and child components then use component.dispatchEvent(). See https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.events

There’s no need to use the reference pub-sub utility.