1. render函数

(1)渲染Html

render: h=>('div', [        h('span', '111')   ])      render: h => h('div', [        h('ul', {            on: {                'click': handleClick            }        }, [                h('li', {                    on: {                        'click': handleClick                    }                 })            ])        ])

(2)通过js代码渲染函数

let list = [{name: 'lison'}, {name: 'lili'}]    const getLiEleArr = (h) => {        return list.map((item, index) => h('li', {            on: {                'click': handleClick            },            key: `list_item_${index}`            }, item.name))    }    render: h => h('div', [        h('ul', {            on: {            'click': handleClick            }        }, getLiEleArr(h))        ])

2. 函数式组件

render-page.vue(父组件) => list.vue(子组件) => render-dom.js

render-page.vue

list.vue

render-dom.js

export default {      functional: true,      props: {        number: Number,        renderFunc: Function      },      render: (h, ctx) => {        return ctx.props.renderFunc(h, ctx.props.number)      }    }

3. JSX

(1)普通写法

methods: {        renderFunc (h, name) {            return (                {name}            )        },      handleClick (event) {        console.log(event)      }    }

(2)组件写法

import CountTo '_c/count-to'    methods: {        renderFunc (h, number) {            return (                
                )        },        handleClick (event) {            console.log(event)        },        handleEnd () {            console.log('end!')        }    }

4. 作用域插槽

render-page.vue: (父组件)

list.vue: (子组件)

<slot><slot>默认插槽： 在父组件两个标签中间写的东西都会在子组件中<slot></slot>插槽显示。