Vue JS — Функция Render

Vue JS — Функция Render

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

Пример

<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "component_test"> <testcomponent></testcomponent> </div> <script type = "text/javascript"> Vue.component('testcomponent',{ template : '<h1>Hello World</h1>', data: function() { }, methods:{ } }); var vm = new Vue({ el: '#component_test' }); </script> </body>
</html>

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

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

<div id = "component_test"> <testcomponent></testcomponent> <testcomponent></testcomponent> <testcomponent></testcomponent> <testcomponent></testcomponent>
</div>

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

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

<div id = "component_test"> <testcomponent>Hello Jai</testcomponent> <testcomponent>Hello Roy</testcomponent> <testcomponent>Hello Ria</testcomponent> <testcomponent>Hello Ben</testcomponent>
</div>

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

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

<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "component_test"> <testcomponent>Hello Jai</testcomponent> <testcomponent>Hello Roy</testcomponent> <testcomponent>Hello Ria</testcomponent> <testcomponent>Hello Ben</testcomponent> </div> <script type = "text/javascript"> Vue.component('testcomponent',{ template : '<h1><slot></slot></h1>', data: function() { }, methods:{ } }); var vm = new Vue({ el: '#component_test' }); </script> </body>
</html>

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

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

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

<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "component_test"> <testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent> <testcomponent :elementtype = "'h3,green,25,h3tag'">Hello Roy</testcomponent> <testcomponent :elementtype = "'p,blue,25,ptag'">Hello Ria</testcomponent> <testcomponent :elementtype = "'div,green,25,divtag'">Hello Ben</testcomponent> </div> <script type = "text/javascript"> Vue.component('testcomponent',{ render :function(createElement){ var a = this.elementtype.split(","); return createElement(a[0],{ attrs:{ id:a[3], style:"color:"+a[1]+";font-size:"+a[2]+";" } }, this.$slots.default ) }, props:{ elementtype:{ attributes:String, required:true } } }); var vm = new Vue({ el: '#component_test' }); </script> </body>
</html>

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

Vue.component('testcomponent',{ render :function(createElement){ var a = this.elementtype.split(","); return createElement(a[0],{ attrs:{ id:a[3], style:"color:"+a[1]+";font-size:"+a[2]+";" } }, this.$slots.default ) }, props:{ elementtype:{ attributes:String, required:true } }
});

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

props:{ elementtype:{ attributes:String, required:true }
}

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

render :function(createElement){ var a = this.elementtype.split(","); return createElement(a[0],{ attrs:{ id:a[3], style:"color:"+a[1]+";font-size:"+a[2]+";" } }, this.$slots.default )
}

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

<testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>

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

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

return createElement( a[0],{ attrs:{ id:a[3], style:"color:"+a[1]+";font-size:"+a[2]+";" } }, this.$slots.default
)

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

attrs:{ id:a[3], style:"color:"+a[1]+";font-size:"+a[2]+";"
}

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

<testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>

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

this.$slots.default

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

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

<div id = "component_test"> <testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent> <testcomponent :elementtype = "'h3,green,25,h3tag'">Hello Roy</testcomponent> <testcomponent :elementtype = "'p,blue,25,ptag'">Hello Ria</testcomponent> <testcomponent :elementtype = "'div,green,25,divtag'">Hello Ben</testcomponent>
</div>

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

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