render函數的渲染

1. 官網：https://cn.vuejs.org/v2/guide/render-function.html。

2. render使用：

render:h=>{
    return h(a,b,c)   //a爲標籤字符串或引入的組件名（如'div'/ mySwiper），b爲對象，表示該標籤的屬性，可以不寫該參數，c爲字符串或者數組子元素（內容或者子標籤）。
}

//1. 使用方法1
render:h=>{
    return h(mySwiper,{
        'class':[],  //相當於v-bind:class,接受一個字符串、對象或字符串和對象組成的數組
        style:{}, //相當於v-bind:style,接受一個字符串、對象或字符串和對象組成的數組
        attrs:{   //標籤基本屬性
            id:"",
            src:""
        },
        domProps: {  //dom屬性
            innerHTML: 'baz'
        },
        props:{
            myProp: '100'
        },
        on:{  //事件監聽
            'on-end':(val)=>{},
            click:(val)=>{}
        },
        nativeOn:{  //原生事件監聽
            click:(val)=>{}
        },
        directives:[],  //自定義指令
        slot:'',  //具名插槽
        key:'',   //key
        ref:''
    })
}

//2. 使用方法2
render:h=h('div',[
    h('span','子元素1')
    h('span','子元素2')
])

//3. 使用方法3 ,render裏面不支持v-for循環 也不支持修飾符
let list=[{name:"Ace"},{name:"ss"}]
let getElArr=h=>{
    return list.map((item,index)=>h('li',{
        on:{
            click:(e)=>{
                e.stopPropagetion()
            }
        },
        key:`${index}`
    },item.name))
}
render:h=h('div',[
    h('ul',{
        on:(e)=>{
            e.stopPropagetion()
        }
    },getElArr(h))
])

3. 函數式組件 ：沒有管理任何狀態，也沒有監聽任何傳遞給它的狀態，也沒有生命週期方法。實際上，它只是一個接受一些 prop 的函數。在這樣的場景下，我們可以將組件標記爲 functional:true，這意味它無狀態 (沒有響應式數據)，也沒有實例 (沒有 this 上下文)。一個函數式組件就像這樣。https://cn.vuejs.org/v2/guide/render-function.html#%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BB%84%E4%BB%B6。

    3.1 聲明一個函數式組件：新建一個render-dom.js文件

export default{
    functional: true,
    props:{
        name:String,
        renderFun:Function
    },
    render:(h,ctx)=>{  //ctx指代當前函數式組件
        return ctx.props.renderFun(ctx.props.name)
    }
}

  3.2 使用函數式組件：在list.vue文件中

<template>
    <div>
        <!--如果render存在就用render自定義內容，否則用name內容-->
        <div v-if='!render'>{{name}}</div>
        <render-dom v-else :render-func='render' :name='name'></render-dom>
    </div>
</template>
<script>
    import RenderDom from 'render-dom.js'
    export defatult{
        components:{
            RenderDom 
        },
        props:{
            name:[String],  
            render:{  
                type:Function,
                default:(h,name)=>{
                    return h('i',{
                        style:{
                            color:'red'
                        }
                    },name)
                }
            }
        }
    }
</script>