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, как продемонстрировано на следующем скриншоте.

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

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее
<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 для того же компонента. Как нам добиться гибкости для выполнения стольких изменений?

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

В этом нам поможет функция 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.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

VUE JS. Быстрый старт

Практический курс по созданию веб-приложения на VUE JS с полного нуля

Получить

Метки:

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

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

Комментарии 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