VUE进阶篇Part9（render函数）

怼烎@ 2022-01-19 05:25 771阅读 0赞

## 这里介绍一下render函数。 ##

作用：使用render函数就不需要在template中一点点的写html了，可以通过函数去构建，实际上render函数就是用来构建一个组件的

这里分为以下几点去讲解，每个都有一个小例子：

1、render函数的初步了解  
2、render函数的第一个参数  
3、render函数的第二个参数  
4、render函数的第三个参数  
5、this.$slots在render函数中的应用  
6、通过props在render函数中传递数据  
7、v-model在render函数中的应用  
8、作用域插槽在render函数中的使用  
9、函数组件化

#### 1、render函数的初步了解 ####

需求：向子组件传递一个数，如果传递的是1，那么内容就会被h1包裹

<child v-bind:level="level">
    我是孙笑川
    </child>

data:{ 
    	level:1
    },
    components:{ 
    	'child':{ 
    		props:['level'],
    		render:function(createElement){ 
    			return createElement('h' + this.level,
    				this.$slots.default
    			)
    		}
    	}
    }

#### 2、render函数的第一个参数 ####

在render函数中的参数必须是createElement，这个createElement是function

createElement作为返回值，传入的参数有三个，这里的先介绍第一个，第一个参数可以传入 String | Object | Function 其中之一

data:{ },
    components:{ 
    	'child':{ 
    		render:function(createElement){ 
    			//String - html标签
    			//return createElement('div')
    			
    			//Object - 一个有数据的对象
    			//return createElemnt({ 
    			// template:'<div>我是孙笑川</div>'
    			//})
    
    			//Function - 函数返回一个含有数据的对象
    			var domFun = function(){ 
    				return { 
    					template:'<div>我是孙笑川</div>'
    				}
    			}
    			return createElement(domFun())
    		}
    	}
    }

#### 3、render函数的第二个参数 ####

第二个参数是可选参数，并且之能是数据对象Object

components: { 
        'child': { 
            //第一个参数必选
            render: function (createElement) { 
                //String - html标签
                return createElement({ 
                    template: '<div>我是孙笑川</div>'
                }, { 
                        class: { 
                            foo: true,
                            baz: false
                        },
                        style: { 
                            //vue中所有的变量都用驼峰写法，所有的组件都用横杠写
                            color: 'darkred',
                            fontSize: '16px'
    
                        },
                        //正常的html特性，就是除了style，class之外的属性，比如id，name，value，src
                        attrs: { 
                            id: 'abc'
                        },
                        //用来写原生的Dom属性，如innerText,innerHTML
                        domProps: { 
                            innerHTML: '<span style="color:darkblue">儒雅随和说的就是我</span>'
                        },
                        //添加事件，比如click，input
                        on: { 
    
                        }
                    })
            }
        }
    }

#### 4、render函数的第三个参数 ####

第三个参数也是可选的，可以是 String | Array ，Array用的比较多，String用的少

第三个参数代表子节点，作为我们构建函数的子节点来用

components:{ 
        'child':{ 
            render:function(createElement){ 
                return createElement('div',[
                    createElement('h1','我是h1的标题'),
                    createElement('h4','我是h4的标题')
                ])
            }
        }
    }

#### 5、this.$slots在render函数中的应用 ####

具体用法直接看例子吧

<child>
        
        <p>我是孙笑川的狗粉丝</p>
        <p>我儒雅随和</p>
        <h1 slot="header">带带大师兄</h1>
        <h3 slot="footer">有本事去找物管啊</h3>
    </child>

components: { 
        'child': { 
            render: function (createElement) { 
                var headerText = this.$slots.header //这个this.$slots.header返回的内容就是含有vnode的数组
                var mainText = this.$slots.default
                var footerText = this.$slots.footer
    
                //第一个函数传div
                return createElement('div', [
                    //这里实际上是虚拟的dom节点，第三个函数传的就是vnode虚拟节点
                    createElement('header', headerText),
                    createElement('main', mainText),
                    createElement('footer', footerText)
                ])
            }
        }
    }

#### 6、通过props在render函数中传递数据 ####

也是看例子怎么用

需求：点击按钮切换图片 <br><br>
    
    <button v-on:click="changeImg">点我切换图片</button> <br><br>
    
    {
       {show}} <br><br>
    
    <child v-bind:showson="show">
    
    </child>

data: { 
        show: false
    },
    components: { 
        'child': { 
            props: ['showson'],
            render: function (createElement) { 
                var imgsrc
                if (this.showson) { 
                    imgsrc = './img/a.jpg'
                } else { 
                    imgsrc = './img/b.jpg'
                }
                return createElement('img',{ 
                    //可以设置正常的html特性，就是除了style，class之外的属性，比如id，name，value，src
                    attrs:{ 
                        src : imgsrc
                    },
                    style:{ 
                        width:'200px',
                        height:'200px'
                    }
                })
            }
        }
    },
    methods: { 
        changeImg: function () { 
            this.show = !this.show
        }
    }

#### 7、v-model在render函数中的应用 ####

又双叒看例子

需求：input输入框输入什么，下面就显示什么 <br><br>
    
    
    
    <child v-bind:name="name" v-model="name"></child> <br><br>
    
    {
       {name}}

data: { 
        name: 'jack'
    },
    components: { 
        'child': { 
            render: function (createElement) { 
                //这个this指的就是当前的vue实例，如果这里不写的话，下面直接用this.$emit()，这时候这个this其实是window对象，会报错的
                var self = this
    
                return createElement('input', { 
                    //用来写原生的Dom属性，如innerText,innerHTML
                    domProps: { 
                        value: self.name
                    },
                    //用来写事件，比如click input 等事件
                    on: { 
                        //这里会默认把原生事件传递进去，这里就是event
                        input: function (event) { 
                            //这里要用self，后面由于传入的是input输入的东西，所以用 event.target.value
                            self.$emit('input', event.target.value)
                        }
                    }
                })
            },
            props: ['name']
        }
    },
    // methods: { 
    // //这个value是触发input事件后，传递到父组件的值
    // showName: function (value) { 
    // this.name = value
    // }
    // }

#### 8、作用域插槽在render函数中的使用 ####

是的，还是看例子

使用this.$scopeSlots对作用域进行插值
    
    <child>
        
        <template scope="prop">
            {
       {prop.text}} <br><br>
            {
       {prop.msg}}
        </template>
    </child>

components: { 
        'child': { 
            render: function (createElement) { 
                //这里就相当于 <div><slot v-bind:text="text"></slot></div>
                return createElement('div', this.$scopedSlots.default({ 
                    text: '我是子组件传递过来的数据',
                    msg: '我是孙笑川'
                }))
            }
        }
    }

#### 9、函数组件化 ####

兄弟，坚持住，这是最后一个例子了

函数组件化在实际应用中不常见，但是见到了还是要知道，所以也需要了解下

函数化组件：用的不多，但是到时候碰到了不能说不会，所以还是了解下

vue中提供了一个functional属性，如果值为true，表示当前vue实例无状态，无实例，就是没有this和data

同时又提供了一个属性context，表示上下文对象，所有的内容都可以拿到，可以通过context拿到所需要的数据

this.text — context.props.text

this.$slots.default — context.children 这个就相当于是组件中间的插槽

data: { 
        msg: '我是父组件的内容'
    },
    components: { 
        'child': { 
            //表示当前vue实例无状态，无实例，没有data和this
            functional: true,
            //这里的context必须要先定义了functional才能用
            render: function (createElement, context) { 
                return createElement('button', { 
                    on: { 
                        click: function () { 
                            //加上debugger后可以看到a是undefined，this的类型是window
                            // debugger
                            // var a = this
                            console.log(context)
                            console.log(context.parent)
                            console.log(context.props.value)
                            //只要节点写对了，什么数据都拿得到
                            alert(context.parent.msg)
    
                            //这里的this还是window，不是vue实例，所以不能拿到数据，只能通过context拿数据
                            //alert(this.value)
                        }
                    }
                }, '点我看context')
            },
            props: ['value']
        }
    }