在 Nuxt 中，如何将数据从布局传递到页面？

Question

例如，在我的/layouts/sidebar.vue 我有以下代码：

<template>
    <div class="mainContainer">
      <nuxt :date-sidebar="'This is from sidebar'"/>
    </div>
</template>

我想将 date-sidebar 的值从布局传递给 /pages/Request/index.vue 并最终传递给 /components/RequestTable.vue，但我目前只是通过使用以下代码传递静态字符串来测试它：

<template>
  <div>
    <RequestTable :date-requested="'something'"/>
    {{ this.dateSidebar }} //data from sidebar that should receive something also tried just {{dateSidebar}}
  </div>
</template>

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

我可以接收从/page/Request/index.vue 到我的/components/Request/RequestTable.vue 的静态值，但我无法从/layouts/sidebar.vue 接收到我的/pages/Request/index 的数据。

所以我的问题正如标题所暗示的那样，我如何将date-sidebar 从/layouts/sidebar.vue 传递到/pages/Request/index。

Answer 1

据我所知，这只适用于nuxt-link（在页面中），如图所示here 而不是nuxt

pages/child.vue

<template>
  <nuxt-child :test="'RESOLVE_PLZ'"/>
</template>

pages/child/index.vue

<script>
export default {
  props: ["test"],
  mounted() {
    console.log(this.test) // RESOLVE_PLZ
  }
}
</script>

这有点合乎逻辑，因为默认布局并不是真正针对这种用法。如果你需要一些动态的东西，它通常会反过来（发射到布局）或简单地使用 Vuex（主要是因为不必“发射”几个组件）。

---

你也可以做一些像这样的 hacky 事情

child.vue

<template>
  <div>
    {{ dateSidebar }}
  </div>
</template>

<script>
export default {
  computed: {
    dateSidebar() {
      return this.$parent.$attrs['date-sidebar']
    }
  },
}
</script>

但这并不常见，因此可能不是这样做的方法。