vue中的render函数

创建一个HelloWorld组件：

<script>
import Test from '@/components/Test'
export default {
  props: { tag: String },
  data() {
    return { arr: ['小王', '小明', '小红'] }
  },
  // template标签在vue内部会被编译成render函数
  render(createElement) {
    return createElement(
      this.tag, // 这里可以写 div li 等标签，可以由父组件传入，也可以写组件
      {},
      this.arr.map((item, index) =>
        createElement(
          // 'li',
          Test, // 这里渲染组件时，需要将 on 换成 nativeOn
          {
            props: { name: item, index },
            attrs: { class: 'my-li' },
            nativeOn: {
              click: () => {
                console.log('点击li', index)
              }
            }
          },
          item
        )
      )
    )
  },
  components: { Test }
}
</script>

Test.vue：

<script>
export default {
  props: { name: String, index: Number },
  render(h) {
    return h(
      'li',
      {
        style: {
          color: 'orange',
          fontWeight: 'bold'
        },
        on: {
          click: () => {
            console.log('点击li了', this.index)
          }
        }
      },
      `name：${this.name}`
    )
  }
}
</script>

App.vue中引入和使用：

<template>
  <div id="app">
    <HelloWorld tag='ul' />
  </div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld'
export default {
  components: { HelloWorld }
}
</script>

 

效果：

 

createElement函数的参数：

参数一：需要渲染成什么标签，可以是props接收的值，也可以是一个组件

参数二：配置项，attrs设置标签属性，on设置标签事件，nativeOn设置原生事件（当渲染组件时需要在nativeOn中设置事件），style设置样式，props设置子组件的值

参数三：标签的内容