原理:
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

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐