javascript - 使用 Charts Js 在 Lightning Web 组件中将数据从父级传递到子级

Question

我最近在 Lightning 网络组件中使用 Charts JS 时遇到了问题。我想分享我为那些遇到问题的人找到的解决方案

当子组件在父组件上更新时，如何手动处理子组件中的数据更改。这将适用于所有内容，但我试图更新他们显示的 Chartsjs 示例。

Answer 1

这是我想出的解决方案。

父 Controller 具有以下嵌套函数

@wire(getRecord, { recordId: '$recordId', fields: CONTACT_FIELDS })
wireContact({ error, data }) {
    if (data) {
        console.log('getRecord Data', JSON.stringify(data))
        this.contact = data;
        getAllDateRecords({ contactId: this.recordId })
            .then(result => {
                this.allDateRecords = result;
                this.chartReady = true;
            })
            .catch(err => console.log(JSON.stringify(err)));
    } else if (error) {
        console.error('error', error)
        this.contact = undefined;
    }

}

父组件有 c-debt-chart 组件和它从 all-date-records 接收数据:

<template>
<div class="slds-page-header__row slds-accordion__content">
                <div class="c-container w-100">
                    <lightning-layout horizontal-align="space">
                        <lightning-layout-item padding="around-small">
                            <template if:true={chartReady}>
                                <c-debt-chart all-date-records={allDateRecords}></c-debt-chart>
                            </template>
                        </lightning-layout-item>
                    </lightning-layout>
                </div>
            </div>
<template>

问题是 Salesforce 上的示例没有显示如何更新图表 js 中的数据。这是我使用 Getter 和 Setters 找到的解决方案

子组件债务图表

<template>
    <lightning-card title="Debt Overview" icon-name="standard:currency">
        <div class="slds-m-around_medium">
            <canvas class="donut" lwc:dom="manual"></canvas>
        </div>
    </lightning-card>
</template>

债务图表 Controller

每次变量 allDateRecords 在父级别发生变化。它将触发 child 使用 getter setter 方法进行更新。这样，在 setter 方法上，它将触发 seperateDateObject 函数，该函数执行一些逻辑来更新图表。

@api
get allDateRecords() {
    return this._allDateRecords;
}

set allDateRecords(value) {
    this._allDateRecords = value;
    this.separateDateObject();
}