Что означает термин многоразовые компоненты в угловых / реагирующих / vue?

Question

Я много слышал о термине «многоразовые компоненты». что это значит?

Например, я хочу отобразить общие данные пользователя (например, идентификатор, имя, возраст и т. д. c.).

Означало ли это, что компонент "включай и работай" просто написать селектор, скажем, <user-preview>, и компонент должен сделать логи c, такие как выборка данных с сервера и их отображение?

или просто html, и поля являются связанными используя родительский компонент?

Answer 1

2 типа повторно используемых компонентов:

• Компонент пользовательского интерфейса (карта, кнопка, макет, например), позволяет иметь шаблон элемента, который можно использовать повсюду в вашем приложении. Его содержимое будет добавлено извне (например, родитель).

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

Answer 2

Термин многократно используемый компонент не определяет c до JS каркасов. Слово многоразового использования здесь даже не важно. В каждом интерфейсе внешнего интерфейса есть какой-то компонент, даже если он называет его по-разному (например, виджет, представление и т. Д. c.).

Что такое компонент ?

A Компонент - это просто определенная c часть вашего пользовательского интерфейса, которую вы решили обернуть в отдельный блок. Обычно компонент имеет внешний вход (например, свойства в React, атрибуты в Angular), который настраивает компонент для конкретного c варианта использования. Кроме того, обычно существует способ передачи данных из компонента (например, onClick).

Компонентом может быть кнопка, метка с указанным c цветом или нечто совершенно сложное. Распространено составлять сложные компоненты из простых компонентов. Например, каждое приложение React - это всего лишь один большой компонент.

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

Концепция компонента очень похоже на концепцию класса в объектно-ориентированном программировании, основной принцип - инкапсуляция . Компонент инкапсулирует некоторую часть функциональности пользовательского интерфейса и облегчает создание сложного пользовательского интерфейса.

Answer 3

В некотором смысле, компонент может действовать как отдельная сущность и может быть реализован в приложении в любом месте. Это еще более улучшается за счет входов (подпорок) и выходов (выходы EventEmitter Angular).

Если вы создали компонент кнопки «В начало», чтобы он функционировал независимо от любого другого компонента в приложение, этот компонент затем «подключи и играй».

Хорошим примером будет Angular Материал - где вы используете Angular компонент для оформления вашего приложения (например, <mat-toolbar></mat-toolbar>)