предисловие

недавно реконсолидированныйVue3

Первая часть завершена:основная часть

Эта статья является второй частью:Погрузитесь в компоненты

Я впитал эту часть содержания в8Карта мозга Чжан, вы можете быстро понятьVue3компоненты, а во вторых удобно посмотреть потом, как показано👇

карта мозга

Регистрация компонентов

⭐️ Будь то глобальная регистрация или локальная регистрация, предоставляется имя компонента и объект конфигурации компонента.

1 注册组件.png

Компонентные реквизиты

⭐️ Реквизиты параметра конфигурации компонента используются для реализации связи родитель-потомок, и по сути это прокси.

2组件Props.png

свойства без атрибутов

⭐️К неимущественным признакам относятся: компоненты, которые не определены вpropsилиemitsОсобенности в опциях, которые будут иметь унаследованные функции

3非属性特性.png

пользовательское событие

⭐️ ВоспользуйтесьpropsСвязь между родителями и детьми может быть достигнута с помощью пользовательских событий, мы можем достичь связи между детьми и родителями в дочернем компоненте через$emit()Отправлять события и передавать параметры, прослушивать события в родительском компоненте

4自定义事件.png

слот слот

⭐️ Слоты — это метод распространения контента, который можно использовать в шаблонах компонентов.<slot>заполнитель

5插槽slot.png

Внедрение зависимостей: предоставление и внедрение

⭐️Функция для облегчения передачи параметров между уровнями, использование на предкахProvide, в потомкахInject

6依赖注入：Provide和Inject.png

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

⭐️Динамические компоненты передаются в реальном времени<component>реализации элемента, посредством егоisАтрибуты переключаются между разными компонентами; регистрация асинхронных компонентов аналогична регистрации обычной регистрации, за исключением того, что она регистрируется черезdefineAsyncComponentметод для определения конфигурации асинхронного компонента

7动态组件和异步组件.png

Ссылки на шаблоны и обновления элементов управления

⭐️ Ссылки на шаблоны, используйте атрибут ref для дочерних компонентов илиHTMLссылка на конкретный элементID,пройти черезthis.$refs.xxxСоответствующий идентификатор получается какxxxкомпоненты илиHTMLЭлемент; в обычных условиях вам не нужно принудительно обновлять элементы управления, потому что есть отзывчивая система, но в крайнем случае вы можете использовать$forceUpdateПринудительное обновление, но все же не рекомендуется

8模板引用和控制更新.png

Приложение

Я загрузил вышеуказанное исходное изображение и исходный файлgithub:GitHub.com/ie co's life/no…

Во-первых, всем удобно качать пачками, а во-вторых, можно модифицировать по своим представлениям и привычкам.

END

Выше на этот разVueВсе, что связано с компонентами

Если у вас есть какие-либо вопросы, пожалуйста, оставьте сообщение и дайте мне знать, спасибо~