VueJS渲染功能
我们已经看到了组件及其用法。例如，我们有一个需要在整个项目中重复使用的内容。我们可以将其转换为组件并将其使用。
让我们看一个简单组件的示例，看看render函数必须在其中执行的操作。
Example
<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 。让我们利用它，看看是否能达到预期的效果。
Example
<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函数的帮助下做到这一点。渲染功能通过使组件保持通用并帮助使用同一组件传递参数来帮助使组件动态化并使用所需的方式。
Example
<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属性的render函数。
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的属性，该属性采用字符串类型的attribute字段。另一个必填字段，其中提到该字段是必填字段。
在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
)
}
渲染函数将createElement作为参数并返回相同的值。 CreateElement以与JavaScript中相同的方式创建DOM元素。我们还使用attrs字段中的值在逗号上拆分了元素类型。
CreateElement将第一个参数作为要创建的elementtag。使用以下代码将其传递给组件。
<testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>
组件需要使用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元素标签。下一个参数是element标签的属性。它们在以下代码的attr字段中定义。
attrs:{
id:a[3],
style:"color:"+a[1]+";font-size:"+a[2]+";"
}
我们为element标签定义了两个属性- id and style 。要传递给id，我们要传递a [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>