How do you bubble up a variable from child to parent?

Question

Currently have a modal parent component. Inside of the content section of the modal I have 3 screens that are called via templates, all on separate templates. I am trying to get my 2nd screen to have the 3rd screen appear by pressing a button on it. IE if:true{isButtonPressedOnSecondScreen} then have 3rd screen appear and change the footer. I am getting stuck because I am not sure how to do this. I have tried using @api and @track but have not had any success with methods or variables. I also tried calling the 3rd screen inside of the second one which works, but I cannot get the footer of the parent to change. Any suggestions on how I would be able to do this? EDIT: added code

modal.html (just showing content and footer templates):

<template if:true={searchScreen}>
<c-search-screen></c-search-screen>
</template>
<template if:true={searchResults}>
<c-search-results></c-search-results>
</template>
<template if:true={searchDetails}>
<c-search-details></c-search-details>
</template>
<!--content above-->
<!-- footers below -->
<template if:true={searchScreen}>
<footer class="slds-modal__footer">
                     <button class="slds-button slds-button_neutral" onclick={closeModal} title="Cancel">Cancel</button>
                     <button class="slds-button slds-button_brand" onclick={showSearchResults} title="search">Search</button>
                 </footer>
</template>

<template if:true={searchResults}>
<footer class="slds-modal__footer slds-modal__footer_directional">
                     <button class="slds-button slds-button_neutral" onclick={showSearchScreen} title="Refine Search">Refine Search</button>
                     <button class="slds-button slds-button_neutral" onclick={closeModal} title="Cancel">Cancel</button>
                     <button class="slds-button slds-button_brand" onclick={addPeople} title="Add">Add</button>
                 </footer>
</template>

<template if:true={searchDetails}>
<footer class="slds-modal__footer slds-modal__footer_directional">
                     <button class="slds-button slds-button_neutral" onclick={showSearchResults} title="See Results">See Results</button>
                     <button class="slds-button slds-button_neutral" onclick={closeModal} title="Cancel">Cancel</button>
                     <button class="slds-button slds-button_brand" onclick={addPeople} title="add">Add</button>
                 </footer>
</template>

modal.js:

import { LightningElement, tack } from 'lwc';

export default class SearchResults exteends LightningElement{
     @track searchScreen = false;
     @track searchResults = false;
     @track searchDetails = false;
     
     showSearchScreen(){
         this.searchScreen = true;
         this.searchResults = false;
     }
     showSearchDetails(){
         this.searchResults = true;
         this.searchDetails = false;
         this.searchScreen = false;
     }
     showSearchResults(){
         this.searchDetails = true;
         this.searchResults = false;
     }
}

searchResults.js:

import { LightningElement, tack, api } from 'lwc';

export default class SearchResults exteends LightningElement{
     @track clickedViewDetails = false;
     
     get options() {
         return [{label: '', value: 'option1'}];
     @api showDetails(){
         this.clickedViewDetails = true;
     }
}

Answer 1

If I understand the problem you need search results to communicate its state with the Modal...

First, you don't need track anymore unless you are working with objects.

API is to communicate from parent to child and a custom event can communicate from child to parent.

below is some sample code where I created three screens and used a custom event in screen Two to communicate to the parent that if it should render screen3.

screen1 HTML

<template>
    <h1>I am screen 1</h1>
    <template if:true={screen2}>
        <c-screen2 ondoit={handleDoIt} ></c-screen2>
    </template>
    <template if:true={screen3}>
        <c-screen3 ></c-screen3>
    </template>

screen2 HTML

<template>
    <h1>I am screen 2</h1>
    <button onclick={handleClick}>Click me</button>
</template>

When the button in clicked in screen2 it calls the event handler handleClick(). In the event handler, we are going to dispatch a custom event that I named doit.

export default class Screen2 extends LightningElement {
    @api screen2
    handleClick(){
        console.log('click');
        const custom = new CustomEvent('doit');
        this.dispatchEvent(custom);
    }

}

If you look at the HTML in screen1 you can see that the host has a property of 'ondoit' and that calls the handleDoIt method in screen1.

so now back to our screen1 JS file. The handleDoIt method is toggling the value of screen3. So when the custom event happens on screen two. It is handled by the parent screen1. And the parent sets the value of the property screen3. This is a public property decorated with API on the screen3 component and switches its rendering on and off.

export default class Screen1 extends LightningElement {   
    screen3;
    handleDoIt(event) {
        this.screen3 ? this.screen3 = false : this.screen3 = true;
    }
}

here is the JS file in screen3.

export default class Screen3 extends LightningElement {
 @api screen3;
}