Vue.js进阶 render函数的妙用

render函数初步了解

• template下只允许有一个子节点
  小栗子：

使用render函数就会省事很多：栗子进行对比：

    

        
            我是一个痴人
        
    
    
    

    

render函数的第一个参数

在render函数的方法中，参数必须是createElement,createElement的类型是function
render函数的第一个参数可以是 String | Object | Function
小栗子：

render函数的第二个参数

小栗子：只列举四个

render函数的第三个参数

第三个参数也是可选 , String | Array—作为我们构建函数的子节点来使用的
小栗子：

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

第三个 参数存的就是VNODE
createElement(‘header’,header), 返回的就是VNODE
var header = this.$slots.header; //–这返回的内容就是含有VNODE的数组
小栗子：

        
            
锄禾日当午
            
何地何斜
            
我是标题
            
我是最后一段
        
    


    

    

在render函数中使用props传递数据

小栗子：相当经典：

  

        点击按钮切换 {{show}}
        

        
    


    

    

v­-model在render函数中的使用

小栗子：

        
        
        
        
        
        
 {{name}}
    


    

    

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

小栗子：

render函数最后一个知识点，很少用了解即可！

函数化组件的应用

使用context的转变:content代表的是上下文对象

// this.text----context.props.text
//this.$slots.default-----context.children

functional: true,表示该组件无状态无实例
实践小栗子 ：