[SalesForce] way to put a custom lightning web component inside another custom lightning web component passing parameters

Assuming you have already set up Visual Studio Code and installed the necessary extensions:

It is as easy as right click the folder in VS Code to delete > SFDX: Delete From Project and Org

Note: If you accidentally renamed your LWC in VS Code and pushed it into your org (e.g. Renamed "LWC_Eample" to "LWC_Example"), the old LWC "LWC_Eample" will still be visible in your SFDC org but not present in your VS Code.

If this happens, go to your VS code project, Right Click your "Manifest > Package.xml" > Retrieve Source in Manifest from Org.

Presto, your old LWC "LWC_Eample" will appear in VS code. Then you can proceed to SFDX: Delete From Project and Org

You can use lighting:navigation for that:

cmp:

<lightning:navigation aura:id="navService"/>

JS: (for standard record page)

goToRecord: function(component,event,helper) {
    component.find("navService").navigate({
        "type": "standard__recordPage",
       "attributes": {
           "recordId": "001xx000003DGg0AAG",
           "objectApiName": "TargetObjectAPIName__c",
           "actionName": "view"
       }
    });
}

Js for custom component (should implement lightning:isUrlAddressable interface)

goToRecord: function(component,event,helper) {
    component.find("navService").navigate({    
        "type": "standard__component",
         "attributes": {
             "componentName": "c__MyLightningComponent"    
         },    
         "state": {
             "c__recordId": ""//pass the target target record id    
         }
    });
}

References:

1. https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_navigation_page_definitions.htm

2. https://developer.salesforce.com/docs/component-library/bundle/lightning:navigation/documentation

correct state as below:

"state": {
     "c__res":"5"  
 }

Component2 html:

<aura:component implements="lightning:isUrlAddressable" >
    <aura:attribute name="res" type="String" />
    <aura:handler name="init" value="{!this}" action="{!c.onPageReferenceChange}"/>
    <aura:handler name="change" value="{!v.pageReference}" action="{!c.onPageReferenceChange}"/>
    Hello {!v.firstname}.

    The result is {!v.res}
</aura:component>

Now its JS:

({
    onPageReferenceChange: function(cmp, evt, helper) {
        var myPageRef = cmp.get("v.pageReference");
        var firstname = myPageRef.state.c__res;
        cmp.set("v.res", res);
    }
})