Передача данных от родителя к потомку

Slim.js — это лёгкая и реактивная библиотека для создания веб-компонентов с использованием декларативного подхода. Одной из ключевых возможностей является эффективная передача данных между компонентами. В частности, передача данных от родительского компонента к дочернему играет важную роль в построении масштабируемых интерфейсов.

Атрибуты и свойства компонентов

Передача данных начинается с определения свойств (properties) в дочернем компоненте. В Slim.js это делается с помощью массива props, который указывается при описании компонента:

import Slim from 'slim-js';

class ChildComponent extends Slim {
  static get props() {
    return ['title', 'count'];
  }

  render() {
    return `
      <div>
        <h2>${this.title}</h2>
        <p>Количество: ${this.count}</p>
      </div>
    `;
  }
}

Slim.define('child-component', ChildComponent);

Здесь title и count становятся реактивными свойствами, изменения которых автоматически отражаются в DOM дочернего компонента.

Установка значений из родителя

В родительском компоненте значения передаются дочернему через атрибуты HTML, соответствующие свойствам:

class ParentComponent extends Slim {
  constructor() {
    super();
    this.title = 'Пример передачи данных';
    this.count = 42;
  }

  render() {
    return `
      <child-component title="${this.title}" count="${this.count}"></child-component>
    `;
  }
}

Slim.define('parent-component', ParentComponent);

Особенности передачи:

  • Атрибуты автоматически приводятся к строковому типу. Для передачи чисел или объектов используется биндинг с помощью {} в Slim.js 4.x.
  • Изменение значения в родителе после рендера автоматически обновляет дочерний компонент при использовании реактивных свойств.

Реактивные свойства и обновления

Slim.js обеспечивает реактивность: любые изменения свойств родителя, переданных через атрибуты, вызывают повторный рендер дочернего компонента. Пример:

class ParentComponent extends Slim {
  static get props() {
    return ['count'];
  }

  constructor() {
    super();
    this.count = 0;
  }

  increment() {
    this.count++;
  }

  render() {
    return `
      <button oncl ick="${() => this.increment()}">Увеличить</button>
      <child-component count="${this.count}"></child-component>
    `;
  }
}

При нажатии на кнопку значение count обновляется в родителе и автоматически передается дочернему компоненту.

Объекты и массивы

Передача сложных данных (объектов, массивов) требует особого подхода, так как HTML-атрибуты работают только со строками. В Slim.js можно использовать прямое связывание через свойства:

class ChildComponent extends Slim {
  static get props() {
    return ['data'];
  }

  render() {
    return `
      <ul>
        ${this.data.map(item => `<li>${item}</li>`).join('')}
      </ul>
    `;
  }
}

Slim.define('child-component', ChildComponent);

class ParentComponent extends Slim {
  constructor() {
    super();
    this.items = ['яблоко', 'банан', 'вишня'];
  }

  render() {
    const child = document.createElement('child-component');
    child.data = this.items;
    return child;
  }
}

Slim.define('parent-component', ParentComponent);

В этом примере data передается напрямую через свойство объекта, минуя строковое представление в атрибуте.

Обновление сложных структур

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

addItem(newItem) {
  this.items = [...this.items, newItem]; // создается новый массив
}

Это гарантирует, что реактивная система Slim.js заметит изменение и обновит DOM дочернего компонента.

Итоги передачи данных

  • Свойства дочернего компонента объявляются через props.
  • Простые типы (строки, числа, булевы значения) можно передавать через HTML-атрибуты.
  • Сложные типы (массивы, объекты) передаются напрямую через свойства компонентов.
  • Любые изменения реактивных свойств родителя автоматически обновляют дочерние компоненты при повторном рендере.

Передача данных от родителя к потомку в Slim.js является основой реактивного потока информации, обеспечивая синхронизацию состояния и динамическое обновление интерфейса без излишнего кода и сложных подписок.

Оглавление