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.

Курс по Angular 4 NgRx

Прямо сейчас посмотрите курс по Angular 4 NgRx

Смотреть курс

Метки:

Похожие статьи:

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree