前面我们已经学习了组件和它的用法。 例如，有一个需要在整个项目中重用的内容。 我们可以将其转换为组件并使用它。
下面来看看一个简单组件的例子，看看渲染函数在它里面做什么。
示例
创建一个文件：render_function.html -
VueJs渲染函数Vue.component('testcomponent',{
template : '
Hello World
',data: function() {
},
methods:{
}
});
var vm = new Vue({
el: '#component_test'
});
考虑上面一个打印"Hello World"的简单组件的例子，在浏览器输出效果如下图所示 -
现在，如果想重新使用组件，可以通过重新打印来实现。 例如，
在浏览器输出效果如下图所示 -
但是，现在需要对组件进行一些更改。 我们不希望打印相同的文本。那么如何修改它？ 如果在组件内部输入一些东西，是否会考虑到？
考虑下面的例子，看看会输出什么效果 -
Hello Java
Hello Ruby
Hello Linux
Hello Python
输出结果仍与我们前面看到的一样。 它不会改变我们需要的文字值。如下 -
组件提供了一些被称为插槽的东西。在下面的示例中使用它，看看是否得到了预期的结果。
创建一个文件：render_function-slots.html
VueJs InstanceHello Java
Hello Ruby
Hello Linux
Hello Python
Vue.component('testcomponent',{
template : '
',data: function() {
},
methods:{
}
});
var vm = new Vue({
el: '#component_test'
});
如上面的代码所示，在模板中添加了插槽，因此现在需要在组件内部发送值，如以下屏幕截图所示。
现在，假设想要改变颜色和大小。 例如，目前使用的是h2标签，希望将HTML标签更改为同一个组件的p标签或div标签。如何能够灵活地进行如此多的改变？
可以在渲染函数的帮助下做到这一点。渲染函数有助于使组件动态化，并通过保持通用性和使用相同组件传递参数来使用它所需的方式。
示例
创建一个文件：render_function-style.html -
VueJs渲染函数样式Hello Java
Hello Ruby
Hello C#
Hello Python
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'
});
在上面的代码中，我们已经改变了组件，并使用下面的一段代码添加了带有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类型的属性字段。 另一个必填字段，其中提到该字段是强制性的。
在渲染函数中，使用了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将第一个参数作为要创建的元素标签。它使用下面的一段代码传递给组件。
Hello Java
该组件需要采取props字段如上所示。 它开始于：props的名字。 在这里传递元素标签，颜色，字体大小和元素的ID。
在渲染函数中，在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]，这是在逗号分割后的值。 使用样式定义了颜色和字体大小。
最后是slot，下面的代码片段中给出的消息。
Hello Java
使用下面的一段代码定义了要在createElement中打印的文本。
this.$slots.default
它采用组件字段中分配的默认值。以下是在浏览器中获得的输出。
元素也显示结构。下面是定义的组件 -
Hello Java
Hello Ruby
Hello C#
Hello Python
¥ 我要打赏
纠错/补充
收藏
加QQ群啦，易百教程官方技术学习群
注意：建议每个人选自己的技术方向加群，同一个QQ最多限加 3 个群。
3441
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
