建立一個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設定子元件的值

引數三：標籤的內容