Salesforce学习 Lwc（十七）【track声明的变量与html项目绑定②】

原创

repick

修改于 2021-03-16 10:05:00

9540

修改于 2021-03-16 10:05:00

文章被收录于专栏：SalesforceSalesforce

Lwc开发过程中，我们经常会遇到父子组件之间的相互调用，下边我们在子组件的【renderedCallback】中写一些逻辑，看看效果如何。

lightingWebComponentExampleChild.html

<template>
  <div class="slds-m-around_small">
    干支：{eto}
  </div>
</template>

lightingWebComponentExampleChild.js

import { LightningElement, api } from 'lwc';

const etoDef = ['さる', 'とり', 'いぬ', 'いのしし', 'ねずみ', 'うし', 'とら', 'うさぎ', 'たつ', 'へび', 'うま', 'ひつじ'];

export default class LightingWebComponentExampleChild extends LightningElement {
  @api
    year = '';

    eto = '';

    renderedCallback() {
        console.log('renderedCallback');
        this.eto = this.convertYearToEto(this.year);
    }

    convertYearToEto(year) {
        console.log('convertYearToEto');
        return year ? etoDef[Number(year) % 12] : '';
   }
}

lightingWebComponentExampleForLwc2.html

<template>
  <div class="app slds-p-around_x-large">
      <lightning-layout vertical-align="end" pull-to-boundary="small">
          <lightning-layout-item padding="around-small">
              <lightning-input data-input="year" label="西暦" pattern="[1-9][0-9]*"></lightning-input>
          </lightning-layout-item>
          <lightning-layout-item padding="around-small">
              <lightning-button label="干支表示" variant="brand" onclick={handleClick}></lightning-button>
          </lightning-layout-item>
      </lightning-layout>
      <!-- 追加 始 -->
      <c-lighting-web-component-example-child year={year}></c-lighting-web-component-example-child>
      <!-- 追加 終 -->
  </div>
</template>

lightingWebComponentExampleForLwc2.js

import { LightningElement } from 'lwc';

export default class LightingWebComponentExampleForLwc2 extends LightningElement {
    year = '';
    handleClick() {
        const element = this.template.querySelector('[data-input=year]');
        this.year = element.value;
    }
}

效果展示：

【干支表示】按钮按下之后，我们发现值并没有取得出来，方法【renderedCallback】中的Log也没有打出来。

原因分析：

根据Log分析，【renderedCallback】方法并没有被执行，原因如图所示html中并没有绑定year变量，所以没有执行【renderedCallback】方法。

现在我们把变量【year】放到html中看看效果如何：

lightingWebComponentExampleChild.html

<template>
  <div class="slds-m-around_small">
    西暦{year}>>>>>>>>>>>>>> 干支：{eto}
  </div>
</template>

效果展示：

【干支表示】按钮按下之后，

原因分析：

根据Log，我们发现【renderedCallback】方法被执行两次。

「year」的值变更　→　刷新　→　【renderedCallback 】方法内「eto」的设定　→　再刷新　→　【renderedCallback 】方法内「eto」的设定　→　「eto」的值没有发生变化、处理结束。

通过上边分析我们已经知道原因，如果html中不绑定year变量的情况下，要如何实现呢，下边我么放弃【renderedCallback】方法，然后使用year的Get，Set方法，试试看效果如何。

lightingWebComponentExampleChild.html ※html中去掉【year】变量

<template>
  <div class="slds-m-around_small">
    干支：{eto}
  </div>
</template>

lightingWebComponentExampleChild.js

import { LightningElement, api } from 'lwc';

const etoDef = ['さる', 'とり', 'いぬ', 'いのしし', 'ねずみ', 'うし', 'とら', 'うさぎ', 'たつ', 'へび', 'うま', 'ひつじ'];

export default class LightingWebComponentExampleChild extends LightningElement {
    @api
    set year(value) {
        this._year = value;
        this.eto = this.convertYearToEto(this._year);
    }
    get year() {
        return this._year;
    }
    _year;

    eto = '';
    renderedCallback() {
        console.debug('renderedCallback');
    }
    convertYearToEto(year) {
        return year ? etoDef[Number(year) % 12] : '';
    }
}

效果展示：

想象一下如果html中变量多的情况下，用这个方法会非常复杂，下边我们也可以用简便一点的方法去实现它。

lightingWebComponentExampleChild.html ※html不变

<template>
  <div class="slds-m-around_small">
    干支：{eto}
  </div>
</template>

lightingWebComponentExampleChild.js

import { LightningElement, api } from 'lwc';

const etoDef = ['さる', 'とり', 'いぬ', 'いのしし', 'ねずみ', 'うし', 'とら', 'うさぎ', 'たつ', 'へび', 'うま', 'ひつじ'];

export default class LightingWebComponentExampleChild extends LightningElement {
    @api
    year;

    /** 修正 始 */
    get eto() {
        return this.convertYearToEto(this.year);
    }
    /** 修正 終 */

    renderedCallback() {
        // this.eto = this.convertYearToEto(this.year);
        console.debug('renderedCallback');
    }

    convertYearToEto(year) {
        return year ? etoDef[Number(year) % 12] : '';
   }
}

效果展示：

下边是html中存在复数个项目时的实装例：

lightingWebComponentExampleChild2.html

<template>
  <div class="slds-hidden">{updTime}</div>
  <div>
      金額：{totalPrice}
  </div>
</template>

lightingWebComponentExampleChild2.js

import { LightningElement,api } from 'lwc';

export default class LightingWebComponentExampleChild2 extends LightningElement {
    @api
    price = 0;

    @api
    discountRate = 0;

    @api
    taxRate = 0;

    get totalPrice() {
        return this.price * (100 - this.discountRate) /100 * (100 + this.taxRate) /100;
    }
}

lightingWebComponentExampleForLwc3.html

<template>
  <div class="app slds-p-around_x-large">
      <lightning-layout>
          <lightning-layout-item size="3">
              <lightning-input data-input="price" type='number' label='定価'></lightning-input>
          </lightning-layout-item>
      </lightning-layout>
      <lightning-slider data-input="discountRate" label="割引率（％）" min="0" max="90" step="5" value={discountRate}></lightning-slider>
      <lightning-slider data-input="taxRate" label="消費税（％）" min="0" max="15" step="1" value={taxRate}></lightning-slider>
      <lightning-button label="金額表示" variant="brand" onclick={handleClick}></lightning-button>
      <div class="slds-p-vertical_small">
          <c-lighting-web-component-example-child2 price={price} discount-rate={discountRate} tax-rate={taxRate}></c-lighting-web-component-example-child2>
      </div>
  </div>
</template>

lightingWebComponentExampleForLwc3.js

import { LightningElement,track } from 'lwc';

export default class LightingWebComponentExampleForLwc3 extends LightningElement {
    @track
    price = 0;
    @track
    discountRate = 0;
    @track
    taxRate = 10;

    handleClick() {
        this.price = Number(this.template.querySelector('[data-input=price]').value);
        this.discountRate = Number(this.template.querySelector('[data-input=discountRate]').value);
        this.taxRate = Number(this.template.querySelector('[data-input=taxRate]').value);
    }
}

效果展示：