I am facing a challenge in passing data from Child A component to Parent, and then from the Parent to Child B using props.
In my project using nuxt.js, I have the following structure:
layouts/default.vue
The default template loads multiple components which may or may not be used based on a variable from the child component, determining their visibility using the v-if directive.
These child components are the pages such as:
pages/blog/index.vue pages/about/index.vue ...
The objective is for the Child component to determine which components to render on the Parent component. This flag can be changed at any time, allowing the user to choose what is displayed in the admin area.
I have attempted to use local computed methods in the child component as well as vuex, but have not been successful with either approach.
The concept in layouts/default.vue is as follows:
<template>
<div>
<TopBar v-if=showTopBar></TopBar>
<Nav v-if=showNav></Nav>
etc...
<nuxt />
</div>
</template>
<script>
import TopBar from "../components/TopBar";
import Nav from "../components/Nav";
etc...
export default {
data() {
return {
showTopBar: false,
showNav: false
etc...
};
},
}
</script>
I have already tried using $emit in the child component without success.
In this scenario, the child components are pages, and their layout is determined by a variable fetched from the API. This allows the user to change the layout dynamically.
The goal is to establish a two-way communication between Child Components. For example:
Accessing the route /blog will load the pages/blog/index.vue component.
This component will send a $emit to layout/default.vue indicating which components should be rendered (selected by the user in the admin area and fetched from the API) along with their component ID. (example: {topBar: true, topBarID: 2})
In layouts/default.vue, upon receiving the $emit from pages/blog/index.vue, I would have a value like TopBar: false, and therefore not render it. Alternatively, if the value is true with an ID, that ID will be passed as a prop to TopBar for rendering a customized version created by the user in the admin area.
If possible, could someone provide an example of how to pass this data in this specific scenario? (It doesn't matter if local variables from the Child component or vuex are used, I am simply looking for a way to access the contents of the variable from the Child rather than a plain or undefined object).
PS.: Any suggestions for a better approach to handling dynamic layouts are welcome.
PS2.: I understand that using specific templates for each page, such as layout/blog and layout/contact, would be more structured. However, since the objective is to create a CMS where the user can enable or disable components through a page Wizard similar to Wix, all component customizations will be stored in the database using an ID. Therefore, the idea of defining all possible components and layouts in layout/default.vue seems like a more suitable approach. If there are other ways to achieve the same goal, I would be interested in exploring those options as well.