在 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（主要是因为不必“发射”多个组件）。

你也可以像这样做一些骇人听闻的事情

child.vue

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

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

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

Answer 2

您需要在子属性中使用 nuxtChildKey 道具。从布局中，绑定 nuxt-child-key 而不是 :date-sidebar。

您可能想要传递一个对象而不是字符串，这样您就可以传递更多数据。所以你的 layout/sidebar 看起来像...

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

在子页面上...

<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:['nuxtChildKey'], 
mounted(){
console.log(this.nuxtCHildKey, 'nck')
}
}
</script>

这里有一份文档...nuxt-child-key

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

In Nuxt, how do you pass data from layouts to pages?

javascript

vue.js

vue-router

nuxt.js