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)
}
})
// Cần slots thì viết setup() trong <script> thường — <script setup> không return được render function
const WithSlots = defineComponent({
setup(props, { slots }) {
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.