javascript / expert
Snippet
Dynamic Component Resolution in Render Functions
When writing manual render functions (h()), global components cannot be accessed directly by string name as they are in templates. resolveComponent allows you to programmatically look up components registered in the app instance or current context.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
import { h, resolveComponent } from 'vue';export default {props: ['type'],setup(props) {return () => {const Component = resolveComponent(props.type === 'admin' ? 'AdminPanel' : 'UserPanel');return h(Component, { class: 'dynamic-wrapper' });};}};
vue
Breakdown
1
resolveComponent('ComponentName');
Resolves a component definition by name from the registration context.
2
h(Component, { ... });
The hyperscript function used to create Virtual DOM nodes manually.
3
return () => { ... }
Returning a function from setup defines the component's render logic.