Salesforce LWC父组件向子组件通信

第二种情况，父组件向子组件通信，本篇的代码基于上篇文章。

1.新建父组件augmentor

augmentor.html

<template>
    <lightning-card title="Augmentor" icon-name="action:download">
        <lightning-layout>
            <lightning-layout-item flexibility="auto" padding="around-small">
                <lightning-input label="Set Starting Counter" type="number" min="0" max="1000000" value={startCounter}  onchange={handleStartChange}>
                </lightning-input>

                <lightning-button class="slds-var-p-vertical_xx-small" label="Add 1m To Counter"  onclick={handleMaximizeCounter}>
                </lightning-button>
            </lightning-layout-item>
        </lightning-layout>

        <c-numerator class="slds-show slds-is-relative" counter={startCounter}>
        </c-numerator>
    </lightning-card>
</template>

augmentor.js

import { LightningElement } from 'lwc';

export default class Augmentor extends LightningElement {
    startCounter = 0;
    
    handleStartChange(event) {
        this.startCounter = parseInt(event.target.value);
    }

    handleMaximizeCounter() {
        this.template.querySelector('c-numerator').maximizeCounter();
    }
}

augmentor.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>55.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightning__AppPage</target>
  </targets>
</LightningComponentBundle>

2.修改子组件numerator

numerator.html

<template>
    <lightning-card title="Numerator" icon-name="action:manage_perm_sets">
        <!-- 新增部分 -->
        <p class="slds-text-align_center slds-var-m-vertical_medium">
            Prior Count: <lightning-formatted-number value={priorCount}></lightning-formatted-number>
        </p>
        <p class="slds-text-align_center slds-var-m-vertical_medium">
            Count: <lightning-formatted-number value={counter}></lightning-formatted-number>
        </p>
        <c-controls class="slds-show slds-is-relative" onadd={handleIncrement} onsubtract={handleDecrement}
            onmultiply={handleMultiply}>
        </c-controls>
    </lightning-card>
</template>

numerator.js

import { LightningElement, api } from 'lwc';

export default class Numerator extends LightningElement {
    // 新增部分
    _currentCount = 0;
    priorCount = 0;
    @api
    get counter() {
        return this._currentCount;
    }
    set counter(value) {
        this.priorCount = this._currentCount;
        this._currentCount = value;
    }
    @api
    maximizeCounter() {
        this.counter += 1000000;
    }

    // @api counter = 0;
    handleIncrement() {
        this.counter++;
    }
    handleDecrement() {
        this.counter--;
    }
    handleMultiply(event) {
        const factor = event.detail;
        this.counter *= factor;
    }
}

调用子组件方法：在子组件中的方法添加@api注解，将该方法设为公开可被父组件调用，而在父组件中，通过获取子组件对象直接调用该方法 this.template.querySelector('c-child').functionChild();
往子组件传参：不要携带data,on,aria等关键字开头（具体参考文档）

参考文档：[1]Communicate from Parent to Child - Trailhead