I am stuck trying pass data from Child A ($emit) ponent to Parent and from Parent to Child B (props).

Using nuxt.js I have:

layouts/default.vue

This default template will load a lot of ponents. Those ponents will be used or not based on variable from child, the variable will set the v-if directive.

The children are the pages like:

pages/blog/index.vue pages/about/index.vue ...

The goal is the Child set on Parent what ponents would be used, the flag can change anytime, the user can choose what will be rendered on admin area.

I have tried use local puted methods on child ponent, and vuex, no luck with both.

The idea on layouts/default.vue.

<template>
    <div>
        <TopBar v-if=showTopBar></TopBar>
        <Nav v-if=showNav></Nav>
        etc...
        <nuxt />
    </div>
</template>

<script>

import TopBar from "../ponents/TopBar";
import Nav from "../ponents/Nav";
etc...

export default {
    data() {
        return {
            showTopBar: false,
            showNav: false
            etc...
        };
    },
}

</script>

On child already have use the $emit but no luck.

Child on this situation are pages, and the layout of those pages will be defined by variable from a fetch on the API, user can change the layout anytime.

The goal is have someting like double way between Child Components, example:

Calling route /blog will call pages/blog/index.vue

This would send to layout/default.vue using $emit what ponents would be rendered (choosed from user in admin area and fetched from API) and the ponent ID. (example: {topBar: true, topBarID: 2})

On layouts/default.vue after get the $emit from pages/blog/index.vue I would have for example TopBar false, and then not render it, or have received true with an ID, this Id will be send to TopBar as prop for render the customized TopBar made by user on Admin area.

Would be possible someone show an example how to get the pass those data for this specific cenario please? (Does not matter if using local variables from the Child ponent or vuex, just looking for an example how to get the contents of variable from Child instead an plain object or undefinied object).

PS.: If there an better approach to deal with dynamic layouts, I am accepting suggestions too.

PS2.: I know I would use specific template per page, like layout/blog and layout/contact, etc... but since the idea is make an CMS, this would not fit on this scenario, I mean, from the admin area user should be able to create pages enabling or disabling ponents through an page Wizard (the idea is getting something like Wix, every ponent customization from user will be stored in the database using an Id, and on layouts user choose the previous ponents mounting the page, in the end all call will be made using the ids of those), and not need to add specific layouts programing, because this the Idea of set all possible ponents and layouts in layout/default.vue sounds at this moment an better approach, but if is not, I would love see other ways to get same goal.

I am stuck trying pass data from Child A ($emit) ponent to Parent and from Parent to Child B (props).

Using nuxt.js I have:

layouts/default.vue

This default template will load a lot of ponents. Those ponents will be used or not based on variable from child, the variable will set the v-if directive.

The children are the pages like:

pages/blog/index.vue pages/about/index.vue ...

The goal is the Child set on Parent what ponents would be used, the flag can change anytime, the user can choose what will be rendered on admin area.

I have tried use local puted methods on child ponent, and vuex, no luck with both.

The idea on layouts/default.vue.

<template>
    <div>
        <TopBar v-if=showTopBar></TopBar>
        <Nav v-if=showNav></Nav>
        etc...
        <nuxt />
    </div>
</template>

<script>

import TopBar from "../ponents/TopBar";
import Nav from "../ponents/Nav";
etc...

export default {
    data() {
        return {
            showTopBar: false,
            showNav: false
            etc...
        };
    },
}

</script>

On child already have use the $emit but no luck.

Child on this situation are pages, and the layout of those pages will be defined by variable from a fetch on the API, user can change the layout anytime.

The goal is have someting like double way between Child Components, example:

Calling route /blog will call pages/blog/index.vue

This would send to layout/default.vue using $emit what ponents would be rendered (choosed from user in admin area and fetched from API) and the ponent ID. (example: {topBar: true, topBarID: 2})

On layouts/default.vue after get the $emit from pages/blog/index.vue I would have for example TopBar false, and then not render it, or have received true with an ID, this Id will be send to TopBar as prop for render the customized TopBar made by user on Admin area.

Would be possible someone show an example how to get the pass those data for this specific cenario please? (Does not matter if using local variables from the Child ponent or vuex, just looking for an example how to get the contents of variable from Child instead an plain object or undefinied object).

PS.: If there an better approach to deal with dynamic layouts, I am accepting suggestions too.

PS2.: I know I would use specific template per page, like layout/blog and layout/contact, etc... but since the idea is make an CMS, this would not fit on this scenario, I mean, from the admin area user should be able to create pages enabling or disabling ponents through an page Wizard (the idea is getting something like Wix, every ponent customization from user will be stored in the database using an Id, and on layouts user choose the previous ponents mounting the page, in the end all call will be made using the ids of those), and not need to add specific layouts programing, because this the Idea of set all possible ponents and layouts in layout/default.vue sounds at this moment an better approach, but if is not, I would love see other ways to get same goal.

• javascript
• vue.js
• frontend
• nuxt.js

1 Answer 1

The correct way to do it would be:

<child-ponent-1 :showNav.sync="showNav">

And within the child ponent you would update that by doing:

this.$emit('update:showNav', value)

The parent would define this property:

data() {
  return {
    showNav: default_value
  }
}

You would have to pass that variable to every child ponent. Every child ponent would have to define it as a property.

Perhaps a better way to do it would be to instead create a simple store within nuxt and use that to house the settings.