如以下代码是可行的:(在通过render方法生成的模板中添加别的组件)
<!DOCTYPE html>
<html>
<head>
<title>Vue的render方法说明</title>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
</head>
<body>
<div id="app">
<child v-bind:level="2">
<div>Hello</div><div> world!</div>
</child>
</div>
<script>
Vue.component('abc', {
template: "<div>abc</div>"
})Vue.component('child', {
render: function (createElement) {
console.log(this.$slots)
return createElement(
'h' + this.level, // tag name 标签名称
[this.$slots.default[0], createElement("abc"), this.$slots.default[1]] // 子组件中的阵列
)
},
props: {
level: {
type: Number,
required: true
}
}
})
new Vue({
el: "#app"
})
</script>
</body>
</html>
显示结果是:
Hello
abc
world!
最后,如果想将原有内容全部使用(而不是只取部分标签),那么直接使用 this.$slots.default 作为第三个参数即可,他本身就是一个数组。
3、总而言之,createElement方法的作用就是动态的创建一个dom用于被render函数渲染,其中参数二和参数三可以选择性省略,参数二用于设置dom的样式、属性、事件等,参数三用于设置分发的内容,包括新增的其他组件。
粗略理解的话,可以理解为:createElement( 标签名, 标签属性, 标签里的内容)
这样的话,我们就有了一个组件的模板所需要的全部内容了
总结
1、render方法的实质就是生成template模板;
2、通过调用一个方法来生成,而这个方法是通过render方法的参数传递给他的;
3、这个方法有三个参数,分别提供标签名,标签相关属性,标签内部的html内容
4、通过这三个参数,可以生活曾一个完整的模板。
备注:
1、render方法可以使用JSX语法,但需要Babel plugin插件;
2、render方法里的第三个参数可以使用函数来生成多个组件(特别是如果他们相同的话),只要生成结果是一个数组,且数组元素都是VNode即可










