render渲染函数和jsx用法

render

// main.js
new Vue({ 
  //render: h => h(App)  //App作为根组件在这里渲染
  render: h => {
    return h('div', { // 第一个参数div标签，第二个参数传入对象，第三个参数可以传入字符串或者数组
      attrs: {
        id: 'box' // html自带的原生属性
      },
      style: {
        color: 'blue'
      }
    }, 'abc')    
  }
}).$mount('#app')

1、第三个参数传入数组使用方式：

// main.js
let list = [{ name: 'aaaaaa' }, { name: 'lili' }]
const getLiEleArr = (h) => {
  return list.map((item, index) => h('li', {
    on: {
      'click': handleClick
    },
    key: `list_item_${index}`
  }, item.name))
}
const handleClick = event => {
  console.log(event)
  event.stopPropagation()
}
new Vue({
  render: h => h('div', [
    h('ul', {
      on: {
        'click': handleClick
      }
    }, getLiEleArr(h))
  ])
}).$mount('#app')

2、传入组件渲染

import CountTofrom './CountTo'

new Vue({
  render: h => {
    return h(CountTo, {
      'class': ['count-to':1===1],
      attrs: {},
      style: {},
      props: {
        endVal: 100
      },
      // domProps: {
      //   innerHTML: '123'
      // },
      on: {
        'on-animation-end': (val) => {
          console.log('animation end!')
        }
      },
      nativeOn: {  //原生事件
        'click': () => {
          console.log('click!')
        }
      },
      directives: [],
      scopedSlots: {},
      slot: '',
      key: '',
      ref: ''
    })
  }

}).$mount('#app')

jsx 用法

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


// home.vue
<template>
    <render-dom :render-func="renderFunc" :number="number"></render-dom>
</template>

<script>
import RenderDom from '@/components/render-dom'
export default {
  components: {
    RenderDom
  },
  data () {
    return {
      number: 88
    }
  },
  methods: {
    renderFunc (h, num) {
      return (
        <div >{num}Hello Vue</div>
      )
    }
  }
}
</script>