【问题标题】：How to pass props to <nuxt /> component pages如何将 props 传递给 <nuxt /> 组件页面
【发布时间】：2018-11-20 19:43:46
【问题描述】：

有没有人能够在 Nuxt.js 中将 props 传递给页面？

典型的 Vue.js 道具可以这样传递：

// parent-component.vue


<child-component :basket-count="items.length"/>

<script>
import ChildComponent from './child-component'
export default {
  data () {
    items: [{}, {}]
  },
  components: {
    childComponent: ChildComponent
  }
}
</script>


// child-component.vue


<p>You have {{ basketCount }} items in your basket</p>

<script>
export default {
  props: [
    'basket-count'
  ]
}
</script>

但是当在布局default.vue 中使用<nuxt /> 标签时，props 不会按应有的方式传递给子页面。

讨论已经发生here，但票似乎没有结论。我还不能解决实现这一目标的工作方法。

会回帖，但很想知道 Nuxt.js 开发人员对此有何想法？

【问题讨论】：

标签： nuxt.js

【解决方案1】：

你必须在 JavaScript 部分使用 camelCase

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

要在页面组件之间传递数据，另一种方法是使用 Vuex Store https://nuxtjs.org/guide/vuex-store/

【讨论】：

我确实使用 nuxtjs axios 模块创建了一个 nuxtjs 应用程序，并且在 pages/index.php 中我能够在存储变量中获取数据。如何在 components/stores.vue 创建的组件中获取 stores 变量？
我使用 async await : async asyncData ({$axios}) { let stores = await $axios.$get('/stores') return {stores} }

【解决方案2】：

通过slots 使用自定义 Vue 组件。

这是我的Default.vue 组件的示例：

<template>
  <!-- 
    Note: This is not a typical Nuxt template
    It is just a custom vue component with a slot (https://vuejs.org/v2/guide/components-slots.html)
    I prefer components with slots over Nuxt's layouts becaise custom components are more versatile"
      - they support passing of props
      - they can be chained (you can make nested layouts)
  -->
  <div>
   <!-- custom navbar component which will appear on every page -->
    <Navbar />

    <main>
      <!-- not all pages have a back button -->
      <BackButton v-if="backLink" :backLink="backLink" />

      <!-- page does not have to have a title -->
      <h1 v-if="title">{{ title }}</h1>

      <!-- not all pages have date displays (only posts do) -->
      <div v-if="date" class="date">
        Date added:
        <b>{{ dateDisplay }}</b>
      </div>
      
     <!-- All the content is filled here -->
      <slot></slot>
    </main>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: false,
    },
    backLink: {
      type: String,
      required: false,
    },
    date: {
      type: String,
      required: false,
    }
  }
}
</script>

然后在index.vue（或任何其他页面）中，我可以这样使用它：

<template>
  <Default title="Index page">
    This is my website's index page. I can put any HTML over here.
  </Default>
</template>

您所要做的就是将Default.vue 作为vue 组件导入。

有点离题，但你可以使用nuxt/components。这样，您不必在每个页面上都导入和注册 Vue 组件。

这种方法的优点：

可以传递道具
这些可以在任何地方、任何页面中使用。这意味着它们可以被链接（嵌套）。例如，您可以有一个 Root 父布局和一个 BlogPost 子布局，其中 BlogPost “继承”自 Root。

【讨论】：

感谢您抽出宝贵时间回答，我相信这可以说是最好的解决方案 - 将 props 封装在组件中，而不是根 nuxt 元素。我当时只是认为某些元素会更干燥，更少重复。但是我现在觉得有一个布局组件是合乎逻辑的。
我可以知道您以前使用什么解决方案吗？我使用了另一个答案中所示的 vuex 方法，但这感觉真的很“hacky”并且变得非常混乱

【解决方案3】：

使用 NuxtChild

只需使用 NuxtChild 而不是 Nuxt，您就可以直接将所有内容传递给加载的页面/组件。 Docs

所以在布局中做这样的事情


  <div id="app">
    <Header />
    <SocialMedia />
    <main>
      <NuxtChild :myPropNameHere="prop data here" />
    </main>
    <Aside />
  </div>

【讨论】：

【解决方案4】：

你必须在child-component.vue中使用这个：

<script>
export default {
    props: {
        basketCount: {
            type: Number,
            default: 0
        }
    }
</script>

【讨论】：

【解决方案5】：

我也有同样的问题。根据下面的线程，不可能将道具传递给元素：

https://github.com/nuxt/nuxt.js/issues/1502

【讨论】：