CODEWITHSUNDEEP
vue.jsnuxt.js
KAVA
KAVA

Reputation: 337

How to change data in default layout from nested components in Nuxt.js

I have layout default.vue:

<template>
  <div>
    <Header></Header>
    <div class="body-wrapper">
      <Nuxt :numberThird="numberThird" />
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      numberThird: 3
    };
  },
};
</script>

Here I am trying to pass prop numberThird.

I want to be able to change this value in the future through components that are deeply nested.

But there is a problem: my pages don't accept this prop (numberThird), they treat it as $parent.$attr.

The question is: can I somehow change this value through deeply nested child components?

Upvotes: 1

Views: 908

Answers (1)

kissu
kissu

Reputation: 46706

As stated here: https://stackoverflow.com/a/67817642/8816585
Props and listeners are not the most friendly on either <nuxt> nor <nuxt-link>.

Kinda confirmed here by Alexander too: https://github.com/nuxt/nuxt.js/issues/8669#issuecomment-764006062

You better off using Vuex in this case, especially if you are aiming to something deep. Props drilling is not recommended most of the time.

Upvotes: 1

Related Questions