Nuxt.js如何通过深层嵌套组件修改default布局内的data数据

return (<Nuxt> 是Nuxt内置的页面出口组件，本身不支持自定义props传递，你给它绑定的`numberThird`属性只会被挂载到`<Nuxt>`实例的`$attrs`上，不会自动透传给内部渲染的页面组件，所以你的页面/子组件无法直接拿到该prop。

# 实现深层子组件修改布局中`numberThird`的可行方案
- 方案1：使用全局状态管理（推荐）
把`numberThird`存入Vuex（Nuxt2）或Pinia（Nuxt3）全局状态中，布局组件可以直接读取状态值，任意层级的子组件都可以通过提交mutation/action修改状态值，无需逐层传参，是跨组件共享可变状态的最优方案。

- 方案2：使用`provide/inject`透传值和修改方法
在`default.vue`布局中通过`provide`向下注入值和修改方法，所有后代组件无论嵌套层级多深都可以通过`inject`拿到，直接调用修改方法即可更新布局中的值。注意Vue2环境下如果直接provide基础类型的值，后代组件拿到的是值副本，无法保持响应性，因此建议传递包含响应式属性的对象：
布局代码修改示例：
```html
<template>
  <div>
    <Header></Header>
    <div class="body-wrapper">
      <Nuxt />
)

</div>
<Footer></Footer>

子组件使用示例：
```js
export default {
  inject: ['numberThirdStore', 'updateNumberThird'],
  methods: {
    changeVal() {
      // 读取最新值
      console.log(this.numberThirdStore.value)
      // 修改布局内的值
      this.updateNumberThird(5)
    }
  }
}

• 方案3：逐层透传props和emit事件（不推荐层级过深场景）
  首先在页面组件中从this.$attrs.numberThird拿到值，再通过props逐层传递给子组件，子组件修改时通过emit逐层向上抛事件，最终在布局层监听事件修改numberThird的值，层级较深时会产生大量冗余代码。

内容的提问来源于stack exchange，提问作者KAVA