Чёрный список компонентов (Props)
Чёрный список во вкладке Props — это набор имён Vue-компонентов, которые исключаются из дерева инспектора и не отображаются в таблице. Фильтрация применяется до построения списка props, поэтому скрытые компоненты не участвуют в обычном обходе дерева.
Общее описание вкладки Props: Основные возможности.
Не путайте этот список с чёрным списком сайтов для автозапуска оверлея (настройки General / Auto Run): здесь фильтрация относится только к именам компонентов.
Где добавить и убрать
Добавить компонент в чёрный список можно двумя способами.
- Через контекстное меню строки в таблице Props — команда добавляет имя текущего компонента в активный список блокировки.
- В Options — секция Component Blacklist в блоке Props позволяет просматривать правила, добавлять новые строки, переключать состояние записи и удалять ненужные элементы.
Если имя уже присутствует в списке, повторное добавление обычно не создаёт дубликат.
Активные и неактивные правила
Список правил делится на два состояния.
- Активные (Blocked) — правило применяется, и совпавшие компоненты скрываются из дерева.
- Неактивные (Off) — запись сохраняется, но временно не участвует в фильтрации.
Переключение состояния позволяет быстро отключать и повторно включать правило без повторного ввода имени.
Удаление строки полностью убирает правило из списка.
Если активных правил нет, фильтрация по чёрному списку фактически не применяется.
Как сопоставляется имя
Сравнение выполняется по имени компонента, которое отображается в инспекторе.
- Если правило не содержит символов
*или%, используется точное совпадение без учёта регистра. - Символы
*и%работают как шаблон подстановки произвольного фрагмента имени.
Например:
MyButton— скрывает только компонент с точным именем MyButton;Base*— скрывает все компоненты, имя которых начинается с Base;*Modal*— скрывает все имена, содержащие Modal.
Для безымянных компонентов может использоваться внутреннее обозначение вроде Anonymous, если оно присутствует в дереве.
Исключения и пересечения
Если компонент подходит сразу под несколько правил, учитывается текущее состояние каждого правила.
Неактивная запись сама по себе не действует как исключение, а просто временно исключается из фильтрации.
Если используется широкая маска, удобнее временно отключить её и проверить результат, чем создавать несколько похожих правил.
Когда применяется
Актуальный список правил используется при каждом обновлении дерева:
- при ручном Refresh;
- при автоматическом обновлении списка;
- при повторном открытии вкладки.
После изменения правил в Options дерево обычно обновляется, чтобы таблица сразу отразила новый набор компонентов.
Пока правило активно, скрытые компоненты недоступны для выбора в таблице и карточке.
Практические советы
- Начинать удобнее с точного имени через контекстное меню строки.
- Широкие маски подходят для повторяющихся служебных компонентов, но требуют аккуратности.
- Чёрный список влияет только на отображение в инспекторе и не изменяет работу Vue-приложения.