第十二課時:渲染函數和JSX快速掌握

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

<template>
      <div>
        <list :list="list" :render="renderFunc">
        </list>
      </div>
    </template>
    <script>
        import List from '_c/list'
        export default {
          data () {
            return {
              list: [
                { number: 100 },
                { number: 45 }
              ]
            }
          },
          components: {
            List
          },
          methods: {
            renderFunc (h, name) {
              return h('i', {
                style: {
                  color: 'pink'
                }
              }, name)
            }
          }
        }
    </script>

list.vue

<template>
      <ul>
        <li @mousemove="handleMove" v-for="(item, index) in list" :key="`item_${index}`">
          <span v-if="!render">{{ item.number }}</span>
          <render-dom v-else :render-func="render" :number="item.number"></render-dom>
        </li>
      </ul>
     </template>
    <script>
        import RenderDom from '_c/render-dom'
        export default {
          name: 'List',
          components: {
            RenderDom
          },
          props: {
            list: {
              type: Array,
              default: () => []
            },
            render: {
              type: Function,
              default: () => {}
            }
          },
          methods: {
            handleMove (event) {
              event.preventDefault()
            }
          }
        }
    </script>

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 (
                <i on-click={this.handleClick} style={{color: 'pink'}}>{name}</i>
            )
        },
      handleClick (event) {
        console.log(event)
      }
    }

(2)組件寫法

import CountTo '_c/count-to'
    methods: {
        renderFunc (h, number) {
            return (
                <CountTo nativeOn-click={this.handleClick} on-on-animation-end={this.handleEnd} endVal={number} style={{color: 'pink'}}></CountTo>
            )
        },
        handleClick (event) {
            console.log(event)
        },
        handleEnd () {
            console.log('end!')
        }
    }

4. 做用域插槽

render-page.vue: (父組件)

<count-to slot-scope="count" :end-val="count.number"></count-to>

list.vue: (子組件)

<slot :number="item.number"></slot>

<slot><slot>默認插槽： 在父組件兩個標籤中間寫的東西都會在子組件中<slot></slot>插槽顯示。