VueJS - функция рендеринга
Мы видели компоненты и их использование. Например, у нас есть контент, который нужно повторно использовать в проекте. Мы можем преобразовать то же самое, что и компонент, и использовать его.
Давайте посмотрим на пример простого компонента и посмотрим, что должна делать в нем функция рендеринга.
пример
<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>Результат остается таким же, как мы видели ранее. Он не меняет текст так, как мы хотим.
Компонент действительно предоставляет то, что называется slots. Давайте воспользуемся этим и посмотрим, получим ли мы желаемый результат.
пример
<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 для того же компонента. Как мы можем иметь гибкость, чтобы осуществить такое количество изменений?
Мы можем сделать это с помощью функции рендеринга. Функция рендеринга помогает сделать компонент динамическим и использовать его так, как требуется, сохраняя его общим и помогая передавать аргументы с использованием одного и того же компонента.
пример
<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>В приведенном выше коде мы изменили компонент и добавили функцию рендеринга со свойством 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:{
elementtype:{
attributes:String,
required:true
}
}Мы определили свойство с именем elementtype, которое принимает поле атрибутов типа string. Еще одно обязательное поле, в котором упоминается, что поле является обязательным.
В функции рендеринга мы использовали свойство 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. Мы также разделили тип элемента по запятой, используя значения в поле attrs.
CreateElement принимает первый параметр в качестве тега элемента, который будет создан. Он передается компоненту с помощью следующего фрагмента кода.
<testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>Компонент должен иметь поле props, как показано выше. Он начинается с: и названия реквизита. Здесь мы передаем тег элемента, цвет, размер шрифта и идентификатор элемента.
В функции рендеринга в 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 мы передаем [3], то есть значение, которое мы имеем после разделения на запятую. Используя стиль, мы определили цвет и размер шрифта.
Последний - это слот, то есть сообщение, которое мы передали компоненту в следующем фрагменте кода.
<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>