如何从 Nuxt.js 中的嵌套组件更改默认布局中的数据答案

【问题标题】：How to change data in default layout from nested components in Nuxt.js如何从 Nuxt.js 中的嵌套组件更改默认布局中的数据
【发布时间】：2021-06-09 11:59:49
【问题描述】：

我有布局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>

我在这里尝试传递道具numberThird。

我希望将来能够通过深度嵌套的组件来改变这个值。

但是有一个问题：我的页面不接受这个道具（numberThird），他们把它当作$parent.$attr。

问题是：我可以通过深度嵌套的子组件以某种方式改变这个值吗？

【问题讨论】：

标签： vue.js nuxt.js

【解决方案1】：

如此处所述：https://stackoverflow.com/a/67817642/8816585
在<nuxt> 和<nuxt-link> 上，道具和听众都不是最友好的。

Alexander 也在这里证实了这一点：https://github.com/nuxt/nuxt.js/issues/8669#issuecomment-764006062

在这种情况下，你最好使用 Vuex，尤其是当你的目标是深入的时候。大多数时候不建议使用道具钻孔。

【讨论】：