vue

父组件

<template>
   <div>
      <vueRender msg="Render Test" :level="3" :items="items">
	 <div class="header">default header</div>
	 <p slot="header">slot header</p>
      </vueRender>   
   </div>
</template>

<script>
import vueRender from './vue-render.vue'
export default {
    name: 'app',
    components: { vueRender },
    data() {
      return {
	items: [{
	  name: 'hello'
	},
	{
	  name: 'vue'
        },
	{
	  name: 'js'
	}]
     }
   }
}
</script>

<style>
</style>

子组件

<template>
	<div class="render">
		<h1>{{ msg }}</h1>
		<renderComponent></renderComponent>
		<renderComponentList></renderComponentList>
	</div>
</template>

<script>
	export default {
		name: 'RenderTest',
		props: {
			msg: String,
			level: {
				type: Number,
				required: true
			},
			items: {
				type: Array,
				required: false
			}
		},
		components: {
			renderComponent: {
				/**
				 * render: 渲染函数
				 * 参数: createElement
				 * 参数类型: Function
				 */
				render: function(createElement) {
					let _this = this['$options'].parent // 我这个是在 .vue 文件的 components 中写的，这样写才能访问this
					let _header = _this.$slots.header // // $slots: vue中所有分发插槽，不具名的都在default里
					/**
					 * createElement 本身也是一个函数，它有三个参数
					 * 
					 * 返回值: VNode
					 * 
					 * 1. 一个 HTML 标签字符串，组件选项对象，或者解析上述任何一种的一个 async 异步函数。必需参数。{String | Object | Function} - 就是你要渲染的最外层标签
					 * 
					 * 2. 一个包含模板相关属性的数据对象你可以在 template 中使用这些特性。可选参数。{Object} - 1中的标签的属性
					 * 
					 * 3. 子虚拟节点 (VNodes)，由 `createElement()` 构建而成，也可以使用字符串来生成“文本虚拟节点”。可选参数。{String | Array} - 1的子节点，可以用 createElement() 创建，文本节点直接写就可以
					 */
					return createElement(
						'h' + _this.level, // 标签名称 - 第一个参数
						{
							style: {
								color: 'gray',
								border: '1px solid pink'
							},
							class: { // 样式类名 例如 cassname就是样式类名
								cassname: true
							},
							// 正常的 HTML 特性
							attrs: {
								id: 'foo'
							},
							// 组件 props
							props: {
								myProp: 'bar'
							},
							// DOM 属性
							domProps: {
								innerHTML: 'baz',
								value: '' // input select 
							},
							//  事件监听器基于 `on`
							on: { // 绑定事件
								click: () => {
									console.log('点击事件')
								},
								input: (event) => { // 用于input
									self.$emit('input', event.target.value)
								}
							},
							// 仅对于组件，用于监听原生事件，而不是组件内部使用
							// `vm.$emit` 触发的事件。
							nativeOn: {
								click: this.nativeClickHandler
							},
							// 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
							// 赋值，因为 Vue 已经自动为你进行了同步。
							directives: [
								{
									name: 'my-custom-directive',
									value: '2',
									expression: '1 + 1',
									arg: 'foo',
									modifiers: {
										bar: true
									}
								}
							],
							// Scoped slots in the form of
							// { name: props => VNode | Array<VNode> }
							scopedSlots: {
								default: props => createElement('span', props.text)
							},
							// 如果组件是其他组件的子组件，需为插槽指定名称
							slot: 'name-of-slot',
							// 其他特殊顶层属性
							key: 'myKey',
							ref: 'myRef'
						}, // 第二个单数
						[
							'text', // 文本节点直接写就可以
							_this.$slots.default, // 默认插槽
							createElement('div', _header)   // 具名插槽  createElement()创建的VNodes
						] // 子元素数组 - 第三个参数 也可以直接  文本'text'
					)
				}
			},
			renderComponentList: {
				render: function(createElement) {
					let _this = this['$options'].parent
					if (_this.items.length) {
						return createElement(
							'ul',
							_this.items.map(function(item) {
								return createElement('li', item.name)
							})
						)
					} else {
						return createElement('p', 'No items found.')
					}
				}
			}
		}
	}
</script>