CODEWITHSUNDEEP
javascriptvue.jsfrontendnuxt.js
Wisdom
Wisdom

Reputation: 131

How to get an value from Child component to Parent on nuxt.js?

I am stuck trying pass data from Child A ($emit) component 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 components. Those components 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 components would be used, the flag can change anytime, the user can choose what will be rendered on admin area.

I have tried use local computed methods on child component, 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 "../components/TopBar";
import Nav from "../components/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 components would be rendered (choosed from user in admin area and fetched from API) and the component 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 component 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 components through an page Wizard (the idea is getting something like Wix, every component customization from user will be stored in the database using an Id, and on layouts user choose the previous components 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 components 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.

Upvotes: 3

Views: 14882

Answers (1)

Ohgodwhy
Ohgodwhy

Reputation: 50787

The correct way to do it would be:

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

And within the child component 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 component. Every child component 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.

Upvotes: 5

Related Questions