Vue3 中 h函数（render）嵌套-插槽 使用方法

原理：
Hyperscript 它本身表示的是 “生成描述 HTML 结构的脚本”

使用方法：

1.基础语法 （嵌套两层，以及包含组件的写法）

const App = {
    render() {
      return Vue.h('h1',
        {
      		style: {color: 'red',height: 'calc(100vh - 475px)'}
		},[
			'这是我h1标签中要展示的内容') ,//第一层
			Vue.h('MyComponent',
				props: {
    				name: 'hhh'
   				},[
					'这是我第二层需要展示的'//第二层
			])
		])		
    }
}
Vue.createApp(App).mount('#app')

//省略颜色高度
<div>
    这是我h1标签中要展示的内容.
    <MyComponent name="hhh">这是我第二层需要展示的</MyComponent>
</div>

2.插槽写法

const App = {
    render() {
      return Vue.h('h1',
        {
      		style: {color: 'red',height: 'calc(100vh - 475px)'}
		},{
		//你的组件可能有更多的插槽，写上插槽名字即可
		 	default: ({参数}) => 'default',
    		foo: () => 'foo',
   			bar: () => 'bar'
		})		
    }
}
Vue.createApp(App).mount('#app')

参考文档：
https://blog.csdn.net/weixin_45747310/article/details/119846386
https://www.cnblogs.com/wingring/p/16404840.html