Концепция компонентов в Petite-Vue

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

В Petite-Vue компоненты — это функциональные блоки, которые описывают поведение и внешний вид UI. Каждый компонент включает в себя:

  1. Шаблон (template) — HTML-разметка, которая описывает структуру UI.
  2. Скрипт (script) — поведение компонента, где определяются данные, методы и события.
  3. Стили (style) — CSS, который применяется только внутри компонента, если используется scoped.

Пример компонента в Petite-Vue:

<div x-data="{ count: 0 }">
  <button @click="count++">Увеличить</button>
  <p>Значение: <span x-text="count"></span></p>
</div>

В этом примере мы видим минимальный компонент с состоянием count, которое увеличивается при клике на кнопку. Это пример компонента, который полностью описан в одном элементе HTML, что характерно для Petite-Vue.

Состояние компонента

Состояние компонента — это данные, которые могут изменяться в процессе работы компонента. В Petite-Vue для этого используется директива x-data. Она инициализирует объект, который хранит все переменные состояния компонента.

Пример:

<div x-data="{ message: 'Привет, мир!' }">
  <p x-text="message"></p>
</div>

Здесь состояние компонента содержит одну переменную message, которая выводится в параграф. Это минимальный пример, показывающий работу с состоянием.

Методы компонента

Методы компонента в Petite-Vue описываются в том же объекте, что и состояние, и вызываются через привязку к элементам с использованием директивы @. Методы могут изменять состояние или выполнять другие действия, такие как обработка событий.

Пример:

<div x-data="{ count: 0, increment() { this.count++ } }">
  <button @click="increment">Увеличить</button>
  <p>Значение: <span x-text="count"></span></p>
</div>

В этом примере метод increment увеличивает значение переменной count. Обработчик события @click привязан к этому методу, что позволяет изменять состояние компонента.

Взаимодействие между компонентами

Petite-Vue ориентирован на простоту, но при этом поддерживает взаимодействие между компонентами. Взаимодействие может происходить через глобальные события, связывание данных между компонентами или прямую передачу данных с использованием атрибутов.

Пример передачи данных:

<div x-data="{ parentData: 'Данные из родителя' }">
  <div x-data="{ childData: parentData }">
    <p x-text="childData"></p>
  </div>
</div>

Здесь данные из родительского компонента передаются в дочерний. Это позволяет компоновать UI-части, передавая информацию через их состояния.

Стилизация компонентов

Petite-Vue позволяет изолировать стили компонентов с помощью атрибута x-data и директивы scoped. Это означает, что CSS будет применяться только к элементам внутри компонента, не влияя на внешние элементы.

Пример:

<div x-data>
  <style scoped>
    p {
      color: red;
    }
  </style>
  <p>Текст будет красным</p>
</div>

В этом примере стили будут применяться только к элементу <p>, находящемуся в этом компоненте.

Жизненный цикл компонента

Жизненный цикл компонента в Petite-Vue представляет собой набор шагов, через которые проходит компонент от создания до уничтожения. Эти шаги можно отслеживать с помощью хуков жизненного цикла.

Основные хуки жизненного цикла в Petite-Vue:

  • x-init — выполняется при инициализации компонента. Используется для выполнения начальных действий, таких как загрузка данных или начальная настройка.
  • x-destroy — вызывается перед уничтожением компонента. Это место для очистки ресурсов или отмены подписок.

Пример:

<div x-data="{ count: 0 }" x-init="console.log('Компонент инициализирован')" x-destroy="console.log('Компонент уничтожен')">
  <button @click="count++">Увеличить</button>
  <p>Значение: <span x-text="count"></span></p>
</div>

Использование компонента в другом компоненте

Для того чтобы использовать один компонент внутри другого, достаточно просто разместить его в шаблоне другого компонента. В Petite-Vue не требуется создание дополнительных классов или специфичных для фреймворка подходов. Вместо этого компоненты просто встраиваются через шаблоны.

Пример:

<div x-data="{ message: 'Привет из родителя' }">
  <div x-data="{ childMessage: message }">
    <p x-text="childMessage"></p>
  </div>
</div>

Здесь дочерний компонент использует данные родителя, делая код компактным и легким для восприятия.

Директивы и компоненты

В Petite-Vue компоненты тесно связаны с директивами, такими как x-if, x-for, x-show, которые управляют отображением элементов в зависимости от состояния компонента.

Пример использования директивы x-if:

<div x-data="{ isVisible: true }">
  <button @click="isVisible = !isVisible">Переключить видимость</button>
  <p x-if="isVisible">Этот текст отображается при true</p>
</div>

В этом примере директива x-if управляет видимостью элемента в зависимости от состояния isVisible.

Сложные компоненты

Для создания более сложных компонентов, которые требуют работы с несколькими состояниями и методами, можно комбинировать различные подходы. Например, можно создавать компоненты, которые взаимодействуют с внешними API, управляют несколькими событиями или используют различные хуки жизненного цикла.

Пример сложного компонента с загрузкой данных:

<div x-data="{ users: [], loading: true, fetchUsers() {
  fetch('https://api.example.com/users')
    .then(response => response.json())
    .then(data => { this.users = data; this.loading = false });
} }" x-init="fetchUsers()">
  <template x-if="loading">
    <p>Загрузка...</p>
  </template>
  <template x-if="!loading">
    <ul>
      <template x-for="user in users" :key="user.id">
        <li x-text="user.name"></li>
      </template>
    </ul>
  </template>
</div>

В этом примере компонент загружает данные с внешнего API и отображает их после завершения загрузки.

Итоги

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

Оглавление