🦉 Пропсы(Props) 🦉

Содержание

Введение
Определение
Хорошая практика
Динамические пропсы

Введение

В Owl props (сокращение от properties) — это объект, который содержит все данные, переданные компоненту его родителем.

class Child extends Component {
  static template = xml`<div><t t-esc="props.a"/><t t-esc="props.b"/></div>`;
}

class Parent extends Component {
  static template = xml`<div><Child a="state.a" b="'string'"/></div>`;
  static components = { Child };
  state = useState({ a: "fromparent" });
}

В этом примере компонент Child получает от своего родителя два реквизита: a и b. Owl собирает их в объект props, при этом каждое значение оценивается в контексте родителя. Таким образом, props.a равно 'fromparent', а props.b равно 'string'.

Обратите внимание, что props — это объект, который имеет смысл только с точки зрения дочернего компонента.

Определение

Объект props состоит из всех атрибутов, определенных в шаблоне, за следующими исключениями:

каждый атрибут, начинающийся с t-, не является пропсом (это директивы QWeb),
также исключены атрибуты style и class (они применяются Owl к корневому элементу компонента).

В следующем примере:

<div>
    <ComponentA a="state.a" b="'string'"/>
    <ComponentB t-if="state.flag" model="model"/>
    <ComponentC style="color:red;" class="left-pane" />
</div>

объект props содержит следующие ключи:

для ComponentA: a и b,
для ComponentB: model,
для ComponentC: пустой объект

Хорошая практика

Объект props — это набор значений, исходящих от родителя. Таким образом, они принадлежат родителю и никогда не должны изменяться потомком:

class MyComponent extends Component {
  constructor(parent, props) {
    super(parent, props);
    props.a.b = 43; // Never do that!!!
  }
}

Пропсы следует рассматривать только для чтения с точки зрения дочернего компонента. Если есть необходимость их модифицировать, то запрос на их обновление должен быть отправлен родителю (например, с событием).

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

Динамические пропсы

Директиву t-props можно использовать для указания полностью динамических реквизитов:

<div t-name="ParentComponent">
    <Child t-props="some.obj"/>
</div>

class ParentComponent {
  static components = { Child };
  some = { obj: { a: 1, b: 2 } };
}

Odoo Articles