在Nuxt框架中如何将数据从layout布局传递到page页面？

解决方法 #

你在布局层给<nuxt>组件绑定的自定义属性不会自动作为页面组件的props注入，可选择以下任意一种方案实现传值：

方案1：适配现有代码，开启属性接收 #

只需要在页面组件/pages/Request/index.vue中添加inheritAttrs: false配置，即可正常接收你声明的dateSidebar prop，修改后代码如下：

<template>
  <div>
    <!-- 直接把拿到的dateSidebar传给子组件即可 -->
    <RequestTable :date-requested="dateSidebar"/>
    {{ dateSidebar }}
  </div>
</template>

<script>
export default{
    inheritAttrs: false, // 新增这行配置
    props:['dateSidebar']
}
</script>

方案2：用provide/inject实现跨层传值（更适合布局到页面的传值场景） #

1. 在/layouts/sidebar.vue中暴露值：

<script>
export default {
  // 其他原有逻辑保留
  provide() {
    return {
      dateSidebar: 'This is from sidebar'
    }
  }
}
</script>

2. 在/pages/Request/index.vue中直接注入使用，不需要绑定props：

<template>
  <div>
    <RequestTable :date-requested="dateSidebar"/>
    {{ dateSidebar }}
  </div>
</template>

<script>
export default{
    inject: ['dateSidebar']
}
</script>

方案3：状态管理（适合该值全局多处使用的场景） #

如果date-sidebar的值需要在项目多个组件/页面中调用，可以将值存在Pinia（Nuxt3推荐）或Vuex（Nuxt2推荐）中，布局层修改状态值，页面层直接读取状态即可。

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