Render functions và h() trong Vue 3?

Render function thay template bằng JavaScript thuần — linh hoạt hơn cho dynamic rendering:

javascript

import { h, defineComponent } from 'vue'

export default defineComponent({
  props: ['tag', 'content'],
  render() {
    return h(this.tag || 'div', { class: 'dynamic' }, this.content)
  }
})

// Trong <script setup> với useSlots()
import { h, useSlots } from 'vue'
const slots = useSlots()
// return () => h('div', slots.default?.())

Dùng khi:

Component cần tag động không thể express qua template
Library code cần flexibility
Tái sử dụng render logic phức tạp

Template vẫn được khuyến nghị cho business logic thông thường.

Xem toàn bộ Vue.js cùng filter theo level & chủ đề con.

Mở danh sách Vue.js