Reputation: 66
Is there any way to render a vue.js component from a child component to on of its parents (maybe not the direct parent) like with slots but in the opposite direction?
My use case: In my root component I do have a <router-view>
and a container for modals. from any child component of the router-view I would like to be able to add a child component to the modal wrapper.
Did I miss a feature of vue.js here or is there a even better practice to solve this problem?
Upvotes: 1
Views: 1778
Reputation: 66
Roy J answered a solution in the comments:
The solution is to use Dynamic Components to create a "placeholder" component in the root component and switch its content by emiting Custom Events in the child components.
Upvotes: 0
Reputation: 11
I guess I am late to the party, but here is my solution for coming generations (valid only if you use vue-router):
routes: [
path: '/dashboard',
name: 'dashboard',
component: DashboardIndex,
children: [{
path: 'popup',
component: PopupPlaceholder,
children: [{
path: 'a',
name: 'a',
component: A,
}, {
path: 'b',
name: 'b',
component: B,
}],
}],
]
Upvotes: 1