Vue.jsRender 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.
Render functions replace templates with pure JavaScript — more flexible for dynamic rendering:
javascript
import { h, defineComponent } from 'vue'
export default defineComponent({
props: ['tag', 'content'],
render() {
return h(this.tag || 'div', { class: 'dynamic' }, this.content)
}
})
// In <script setup> with useSlots()
import { h, useSlots } from 'vue'
const slots = useSlots()
// return () => h('div', slots.default?.())Use when:
- Component needs dynamic tags impossible to express in templates
- Library code needing flexibility
- Reusing complex render logic
Templates are still recommended for typical business logic.