Vue JS — Функция Render

От автора: мы уже знакомы с компонентами и их использованием. Например, у нас есть содержимое, которое нужно повторно использовать в проекте. Мы можем конвертировать то же самое как компонент и использовать. Давайте рассмотрим пример простого компонента и узнаем, что должна делает внутри него функция Vue JS render.

Пример

Рассмотрим вышеприведённый пример простого компонента, который выдаёт Hello World, как продемонстрировано на следующем скриншоте.

Теперь, если мы хотим повторно использовать компонент, мы можем просто вывести его ещё раз. Например

И результат будет выглядеть так.

Однако, теперь нам нужно внести некоторые изменения в компонент. Мы не хотим, чтобы выводился тот же текст. Как нам это изменить? Если мы выведем что-то внутри компонента, будет ли это учтено? Давайте рассмотрим следующий пример и узнаем, что произойдёт.

Результат остаётся тем же.

Компонент представляет так называемые слоты. Давайте используем их и посмотрим, получим ли мы желаемый результат.

В приведённом выше коде мы добавили в шаблон слот, и теперь он принимает значение, чтобы отправить его внутрь компонента, как продемонстрировано на следующем скриншоте.

Дальше давайте представим, что мы хотим изменить цвет и размер текста. Например, сейчас мы используем тэг h1 и хотим изменить HTML-тэг на p или div для того же компонента. Как нам добиться гибкости для выполнения стольких изменений?

В этом нам поможет функция render. Функция render помогает сделать компонент динамичным и использовать его так, как требуется, делая его общим и помогая передавать аргументы при помощи одного и того же компонента.

В приведённом выше коде мы изменили компонент и добавили функцию render со свойством props, используя следующий код.

props выглядит следующим образом.

Мы определили свойство с именем elementtype, которое принимает поле атрибута типа string. Другое поле required, оно указывает, что поле является обязательным. В функции render мы использовали свойство elementtype, как продемонстрировано в следующем фрагменте кода.

Функция render принимает createElement в качестве аргумента и возвращает то же самое. CreateElement создаёт элемент DOM точно так же, как в JavaScript. Мы также разделили elementtype запятой, используя значения в поле attrs. CreateElement принимает в качестве первого параметра созданный elementtag. Он передаётся компоненту при помощи следующего кода.

Компонент должен принять поле props как в примере выше. Оно начинается с : и имени props. Здесь мы передаём тэг, цвет, размер шрифта и id элемента.

В функции render в createElement мы вставляем запятую, поэтому первый элемент — это elementtag, который передаётся createElemet, как продемонстрировано в следующем фрагменте кода.

a[0] — это тэг элемента html. Следующим параметром является атрибуты для тэг элемента. Они определяются в поле attr в следующем отрывке кода.

Мы определили два атрибута для тэга элемента — id и style. В id мы передаём a[3], являющееся значением, которое мы получаем после добавления запятой. Используя style, мы определили цвет и размер шрифта. Последним идёт слот, представляющий сообщение, которое мы передали компоненту в данном фрагменте кода:

Мы определили текст, который должен быть выведен в createElement при помощи следующего отрывка кода.

Он принимает значение по умолчанию, присвоенное в поле компонента. В браузере будет отображаться следующее.

Элемент также задает структуру. Мы определили следующие компоненты:

Источник: //www.tutorialspoint.com/

Редакция: Команда webformyself.

Комментарии Вконтакте: