<div id="app"></div>
<script>
const root = Vue.createApp({
template:`
<div>
<my-title :level='2'>
hey
<my-title/>
</div>
`
})
//定义 全局组件
root.component('my-title',{
props:['level'],
template:`
<h1 v-if='level === 1'> <slot/> </h1>
<h2 v-if='level === 2'> <slot/> </h2>
`
})
root.mount('#app')
</script>
render(){ } 使用
<body>
<div id="app"></div>
<script>
const root = Vue.createApp({
template:`
<div>
<my-title :level='2'>
hey
<my-title/>
</div>
`
})
//定义 全局组件
root.component('my-title',{
props:['level'],
render(){
//h函数
const {h} = Vue;
//第一个参数标签名 , 第二个参数标签的属性 , 第三个参数 数组，字符串 床日
return h('h'+this.level,{}, this.$slots )
}
})
root.mount('#app')
</script>
</body>
<body>
<div id="app"></div>
<script>
const root = Vue.createApp({
template:`
<div>
<my-title :level='2'>
hey
<my-title/>
</div>
`
})
//定义 全局组件
root.component('my-title',{
props:['level'],
render(){
//h函数
const {h} = Vue;
//第一个参数标签名 , 第二个参数标签的属性 , 第三个参数 数组，字符串 床日
return h('h'+this.level,{}, this.$slots )
}
})
root.mount('#app')
</script>
</body>