javascript / expert
Snippet
Funktionale Baum-Komponenten mit h()
Für hochdynamische oder rekursive Strukturen können Templates einschränkend sein. Funktionale Komponenten, die die 'h' (Hyperscript) Funktion verwenden, bieten eine bessere Kontrolle über die Render-Logik und eine etwas bessere Performance für rein präsentative Knoten ohne Instanz-Overhead.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { h, resolveComponent } from 'vue';const RecursiveTree = (props) => {const children = props.items.map(item => {return h('div', { class: 'node' }, [h('span', item.label),item.children ? h(resolveComponent('RecursiveTree'), { items: item.children }) : null]);});return h('div', { class: 'tree-root' }, children);};RecursiveTree.props = ['items'];export default RecursiveTree;
vue
Erklärung
1
h(resolveComponent('RecursiveTree'), ...)
Rendert die gleiche Komponente rekursiv durch Auflösen ihres Namens.
2
RecursiveTree.props = ['items']
Definiert explizit Props für eine funktionale Komponente.