Vue基础の render() 函数

    <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>

View Code

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>

View Code

<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>

Vue基础 の render() 函数

Vue基础の render() 函数