vue2子组件prop接受jsx并渲染

子组件 subComponent

<template>
	<div class="render-box">
		<render-dom :render="render" />
	</div>
</template>

export default {
	name: "SubComponent",
	data(){
		return {}
	},
	props: {
		render:{
			type: Function,
			default: ()=>{}
		}
	},
	components: {
		RenderDom: {
		  functional: true, // 函数式组件 - 无 data 和 this 上下文 => better render
	      props: {
	        render: Function
	      },
	      /**
	       * @param {Function} createElement - 原生创建dom元素的方法， 弃用，推荐使用 jsx
	       * @param {Object} ctx - 渲染的节点的this对象
	       * @argument 传递参数 row index
	       */
	      render(createElement, ctx) {
	        return ctx.props.render(createElement);
	      }
		}
	}
}

父组件 parentComponent

<template>
	<div class="render-box">
		<sub-component :render="render" />
	</div>
</template>

export default {
	name: "parent-component",
	data(){
		return {
			render: ()=> {
			  return ([
                <el-checkbox onChange={this.handleChangeCheck}>全选</el-checkbox>,
                <el-checkbox>aaaa全选</el-checkbox>
              ])
			}
		}
	},
	methods: {
		handleChangeCheck(val){
			console.log("val", val)
		}
	}
}