🦉 Монтирование приложения 🦉

Содержание

• Введение
• API

Введение

Монтирование приложения Owl выполняется с помощью метода mount (доступного в owl.mount, если вы используете сборку iife, или его можно напрямую импортировать из owl, если вы используете модульную систему):

const mount = { owl }; // если owl доступна как объект

const env = { ... };
const app = await mount(MyComponent, { target: document.body, env });

Другой пример:

const config = {
  env: ...,
  props: ...,
  target: document.body,
  position: "self",
};
const app = await mount(App, config);

Обычный способ инициализации приложения — сначала настроить окружение, а затем вызвать метод mount.

API

Mount принимает два параметра:

• C, который должен быть классом компонента (НЕ экземпляром),
• params, который представляет собой объект со следующими ключами:
  • target (HTMLElement | DocumentFragment): цель операции монтирования
  • env (необязательно, Env) окружение
  • position (optional, "first-child" | "last-child" | "self") – позиция, в которой он должен быть смонтирован (дополнительную информацию см. ниже)
  • props (необязательный, любой): некоторые начальные значения, которые задаются в качестве реквизита. Полезно, когда можно настроить корневой компонент или при тестировании подкомпонентов.

Вот различные позиции, поддерживаемые Owl:

• first-child: с этой опцией компонент будет добавляться внутрь цели,
• last-child (значение по умолчанию): с этой опцией компонент будет добавлен в целевой элемент,
• self: цель будет использоваться как корневой элемент для компонента. Это означает, что целью должен быть HTMLElement (а не фрагмент документа). В этой ситуации возможно, что компонент не может быть размонтирован. Например, если его целью является document.body.

Метод mount возвращает промис, который разрешается в экземпляр созданного компонента.