javascript / intermediate
Snippet
Hochperformante funktionale Komponenten
Funktionale Komponenten sind zustandslos und instanzlos, was sie deutlich schneller macht als reguläre Komponenten. Sie eignen sich am besten für einfache Darstellungselemente, die keine Lifecycle-Hooks benötigen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
import { h } from 'vue';const MyButton = (props, { slots }) => {return h('button', {class: ['btn', `btn-${props.type}`],onClick: () => console.log('Clicked!')}, slots.default?.());};MyButton.props = ['type'];
vue
Erklärung
1
h('button', ...)
Die Hyperscript-Funktion, die verwendet wird, um manuell einen virtuellen DOM-Knoten zu erstellen.
2
slots.default?.()
Führt die Standard-Slot-Funktion aus, um Kinder innerhalb des Buttons zu rendern.