LWC Architecting with Parent and Child Communication in mind

Question

I found this excellent code sample for Multi-select Combobox. Ideally, I'd like to embed it as Child in my Parent LWC. In trying to do that, I'm stumbling a lot in how to architect communication Parent to Child and back to Parent.

My request: Just because I can outline the process below, doesn't mean I know how to code it. I've read a lot on events, Parent to Child, and Child to Parent articles. I'm not seeing how it all fits together in code yet. Anything you can do to make this less uncertain for me would be helpful.

Also, I may just create all of this as a single component. Please let me know what the consequences are if I go this route.

Here's the desired process:

1. User types in Search field (child)
2. User clicks enter or hits submit (child) — I guess this is an event
3. Parent gets searchTerm from Child -- not sure how yet
4. Parent has an @wire function "queryWithSearchTermParam"

• function updates a variable called "options" with a list of options (AccountName, AccountID) on the Child

5. User selects 1 or more options

• selected options show as pills under the Search Field (child)
• User sees all selectedOptions as pills

6. User clicks Submit button (parent)
7. Parent has an Imperative call to Apex Controller because this method will insert records

• Parameters: List of Account IDs, CustomRecordID
• Apex Controller creates junction records based on Account IDs and CustomerRecordID

My current Parent code

import { LightningElement, api, track, wire } from 'lwc';
import getVendorsByName from '@salesforce/apex/RfqSendVendorEmailsController.getVendorsByName';

export default class RfqSendVendorEmails extends LightningElement {
@api recordId;   // Request for Quote Id
byNameOptions;

FIELDLABELS = {
    SEARCH_BY_VENDOR_NAME : 'Search by Vendor Name',
    SEARCH_BY_VENDOR_CITY : 'Search by Vendor City',
    SEARCH_BY_VENDOR_TYPE : 'Search by Vendor Type',
    SEARCH_BY_VENDOR_SUBTYPE : 'Search by Vendor Sub-type'
}

connectedCallback() {
    //this.byNameOptions = JSON.parse('[{"label":"Bob", "value":"123", "isVisible":"false"},{"label":"Chrissey","value":"345","isVisible":"false"}]');
    this.setByNameOptions;
}

setByNameOptions() {
    console.log('*** this.byNameOptions ' + this.byNameOptions);
    this.byNameOptions = getVendorsByName({'Grainger'});
    console.log('*** this.byNameOptions ' + this.byNameOptions);

}

}

<template>
<c-multi-select-combobox label={FIELDLABELS.SEARCH_BY_VENDOR_NAME} 
                         options={byNameOptions}>
</c-multi-select-combobox>
<!--
<c-multi-select-combobox label={FIELDLABELS.SEARCH_BY_VENDOR_CITY}></c-multi-select-combobox>
<c-multi-select-combobox label={FIELDLABELS.SEARCH_BY_VENDOR_TYPE}></c-multi-select-combobox>
<c-multi-select-combobox label={FIELDLABELS.SEARCH_BY_VENDOR_SUBTYPE}></c-multi-select-combobox>
-->

public with sharing class RfqSendVendorEmailsController {
public RfqSendVendorEmailsController() {

}

@AuraEnabled (cacheable=true)
public static List<Account> getVendorsByName(String searchTerm){

    String term = '%' + searchTerm + '%';

    List<Account> vendors = [
        SELECT Id
        FROM Account
        WHERE RecordType.Name = 'Vendor Account'
        AND Account.Name LIKE: term
        ORDER BY Account.Name ASC
    ];
    System.debug('*** Vendors: ' + vendors);
    return vendors;
}

}

Answer 1

Child to parent communication should basically always happen by dispatching events. I highly recommend the Trailhead module Communicate from Child to Parent.

The key is, your child will have some code that looks like the below:

this.dispatchEvent(new CustomEvent('add'));

And then in the parent markup, you will have a binding to that event:

<c-controls onadd={handleIncrement} ...>

Then all there is to do is write the logic for handleIncrement. It really is that simple most of the time.