Набор: Vue. Повторное использование кода

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

Но повторное использование можно (и даже оптимальнее) осуществлять за счет других подходов. Набор приемов куда как более велик. Предлагаю вам поразмышлять на эту тему вместе с автором в нескольких статьях.

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

В прошлой статье мы сделали на Vue 3 с нуля таблицу для отображения данных, получаемых с сервера. Эта таблица имеет разбивку на страницы и возможность менять сортировку. А в этой новой статье будет показано как сделать тот код более пригодным для повторного использования. Будет рассказано о технике, которая делает компоненты гораздо более универсальными.

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

В этой статье мы продолжим обсуждение темы повторного использования кода во Vue.js. Тема была начата несколькими статьями ранее. Здесь, как и было обещано ранее, будет обсуждение расширенной работы со слотами и описание вариантов того, как это можно применить в реальных проектах.

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

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