[Salesforce]Lightning Web Component間の通信方法

Lightning Web Component間の通信方法

・publicプロパティ、publicメソッド

親コンポーネントから子コンポーネントへ値を渡す方法になります。

親コンポーネントから@apiデコレーターを使用して、子コンポーネントへ値を直接渡します。

publicParent.html

<template>
        <lightning-card title="Parent">
                <div class="slds-grid">
                        <div class="slds-p-around_medium">
                                <lightning-combobox 
                                        name="value" 
                                        label="value" 
                                        value={value} 
                                        options={options} 
                                        onchange={handleChange} 
                                        variant="label-hidden">
                                </lightning-combobox>
                        </div>
                        <div class="slds-p-around_medium">
                                <c-public-child value={value}></c-public-child>
                        </div>
                </div>
        </lightning-card>
</template>

publicParent.js

import { LightningElement } from 'lwc';

export default class PublicParent extends LightningElement {
        value = '';

        get options() {
                return [
                        { label: '', value: '' },
                        { label: 'A', value: 'A' },
                        { label: 'B', value: 'B' },
                        { label: 'C', value: 'C' }
                ];
        }

        handleChange(event) {
                this.value = event.detail.value;
        }
}

pulicChild.html

<template>
        <!-- Parentから渡された値を表示する -->
        <div>
                <span>通信値 {value}</span>
        </div>
</template>

publicChild.js

import { LightningElement, api } from 'lwc';

export default class PublicChild extends LightningElement {
        // publicプロパティは@apiデコレーターを使用して宣言します。
        // @apiをつけることで親コンポーネントからアクセス可能になります。
        @api value;
}