首页 > 其他 > 详细

Vue基础 の render() 函数

时间:2021-03-27 18:43:09      阅读:23      评论:0      收藏:0      [点我收藏+]
 
技术分享图片
    <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() 函数

原文:https://www.cnblogs.com/Hanro-Z/p/14586089.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!