Веб-компоненты Salesforce Lightning (LWC) предоставляют мощную основу для создания интерактивных и эффективных пользовательских интерфейсов. Одной из ключевых особенностей LWC является привязка данных, которая позволяет установить связь между свойствами компонента и значениями, введенными пользователем. В этой статье мы рассмотрим различные методы привязки данных для нескольких входных значений в LWC, а также приведем примеры кода, демонстрирующие их реализацию.

Метод 1: двусторонняя привязка данных с использованием @track
Декоратор @track используется для создания реактивного свойства, которое отслеживает изменения его значения. Используя @track, вы можете установить двустороннюю привязку данных между свойствами компонента и входными значениями.

Пример:

import { LightningElement, track } from 'lwc';
export default class MyComponent extends LightningElement {
  @track firstName = '';
  @track lastName = '';
  handleInputChange(event) {
    const { name, value } = event.target;
    this[name] = value;
  }
}

Метод 2: двусторонняя привязка данных с использованием методов получения и установки
Другой подход заключается в использовании методов получения и установки для достижения двусторонней привязки данных. Определив методы получения и установки для свойств компонента, вы можете перехватывать изменения значений и соответствующим образом обновлять поля ввода.

Пример:

import { LightningElement } from 'lwc';
export default class MyComponent extends LightningElement {
  _firstName = '';
  _lastName = '';
  get firstName() {
    return this._firstName;
  }
  set firstName(value) {
    this._firstName = value;
    this.updateInputFields();
  }
  get lastName() {
    return this._lastName;
  }
  set lastName(value) {
    this._lastName = value;
    this.updateInputFields();
  }
  updateInputFields() {
    // Logic to update input fields
  }
  handleInputChange(event) {
    const { name, value } = event.target;
    this[name] = value;
  }
}

Метод 3: односторонняя привязка данных с использованием обработки событий
Если вам нужно только передать входные значения родительскому компоненту или вызвать действие, вы можете использовать обработку событий для достижения односторонней привязки данных. Отправляя пользовательские события, вы можете передавать входные значения родительскому компоненту или запускать определенные действия.

Пример:

// Child Component
import { LightningElement } from 'lwc';
export default class MyComponent extends LightningElement {
  handleInputChange(event) {
    const { name, value } = event.target;
    const inputChangeEvent = new CustomEvent('inputchange', {
      detail: { name, value }
    });
    this.dispatchEvent(inputChangeEvent);
  }
}
// Parent Component
<template>
  <c-my-component oninputchange={handleInputChange}></c-my-component>
</template>
<script>
  import { LightningElement } from 'lwc';
  export default class ParentComponent extends LightningElement {
    handleInputChange(event) {
      const { name, value } = event.detail;
      // Logic to handle the input change
    }
  }
</script>

В этой статье мы рассмотрели несколько методов привязки данных для нескольких входных значений в веб-компонентах Salesforce Lightning (LWC). Мы рассмотрели двустороннюю привязку данных с использованием методов @track и getter/setter, а также одностороннюю привязку данных с использованием обработки событий. Используя эти методы, вы можете создавать динамические и интерактивные пользовательские интерфейсы в LWC.