От автора: мы уже знакомы с компонентами и их использованием. Например, у нас есть содержимое, которое нужно повторно использовать в проекте. Мы можем конвертировать то же самое как компонент и использовать. Давайте рассмотрим пример простого компонента и узнаем, что должна делает внутри него функция Vue JS render.
Пример
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<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, как продемонстрировано на следующем скриншоте.
Теперь, если мы хотим повторно использовать компонент, мы можем просто вывести его ещё раз. Например
|
1 2 3 4 5 6 |
<div id = "component_test"> <testcomponent></testcomponent> <testcomponent></testcomponent> <testcomponent></testcomponent> <testcomponent></testcomponent> </div> |
И результат будет выглядеть так.
Однако, теперь нам нужно внести некоторые изменения в компонент. Мы не хотим, чтобы выводился тот же текст. Как нам это изменить? Если мы выведем что-то внутри компонента, будет ли это учтено? Давайте рассмотрим следующий пример и узнаем, что произойдёт.
|
1 2 3 4 5 6 |
<div id = "component_test"> <testcomponent>Hello Jai</testcomponent> <testcomponent>Hello Roy</testcomponent> <testcomponent>Hello Ria</testcomponent> <testcomponent>Hello Ben</testcomponent> </div> |
Результат остаётся тем же.
Компонент представляет так называемые слоты. Давайте используем их и посмотрим, получим ли мы желаемый результат.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<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 помогает сделать компонент динамичным и использовать его так, как требуется, делая его общим и помогая передавать аргументы при помощи одного и того же компонента.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<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, используя следующий код.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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 выглядит следующим образом.
|
1 2 3 4 5 6 |
props:{ elementtype:{ attributes:String, required:true } } |
Мы определили свойство с именем elementtype, которое принимает поле атрибута типа string. Другое поле required, оно указывает, что поле является обязательным. В функции render мы использовали свойство elementtype, как продемонстрировано в следующем фрагменте кода.
|
1 2 3 4 5 6 7 8 9 10 11 |
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. Он передаётся компоненту при помощи следующего кода.
|
1 |
<testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent> |
Компонент должен принять поле props как в примере выше. Оно начинается с : и имени props. Здесь мы передаём тэг, цвет, размер шрифта и id элемента.
В функции render в createElement мы вставляем запятую, поэтому первый элемент — это elementtag, который передаётся createElemet, как продемонстрировано в следующем фрагменте кода.
|
1 2 3 4 5 6 7 8 9 |
return createElement( a[0],{ attrs:{ id:a[3], style:"color:"+a[1]+";font-size:"+a[2]+";" } }, this.$slots.default ) |
a[0] — это тэг элемента html. Следующим параметром является атрибуты для тэг элемента. Они определяются в поле attr в следующем отрывке кода.
|
1 2 3 4 |
attrs:{ id:a[3], style:"color:"+a[1]+";font-size:"+a[2]+";" } |
Мы определили два атрибута для тэга элемента — id и style. В id мы передаём a[3], являющееся значением, которое мы получаем после добавления запятой. Используя style, мы определили цвет и размер шрифта. Последним идёт слот, представляющий сообщение, которое мы передали компоненту в данном фрагменте кода:
|
1 |
<testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent> |
Мы определили текст, который должен быть выведен в createElement при помощи следующего отрывка кода.
|
1 |
this.$slots.default |
Он принимает значение по умолчанию, присвоенное в поле компонента. В браузере будет отображаться следующее.
Элемент также задает структуру. Мы определили следующие компоненты:
|
1 2 3 4 5 6 |
<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> |
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.
