如何将 props 传递到 <nuxt /> 组件页面

Question

有人能够将 props 传递到 Nuxt.js 中的页面吗？

典型的 Vue.js 属性可以这样传递：

parent-component.vue

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

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

child-component.vue

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

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

但是，当在布局

<nuxt />

中使用

default.vue

标签时，道具不会按其应有的方式传递到子页面。

讨论已经在这里进行，但票证似乎还没有结论。我还无法解决实现这一目标的可行方法。

会回复，但很想知道 Nuxt.js 开发人员对此的想法？

Answer 1

你必须在 JavaScript 部分使用驼峰命名法

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

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

Answer 2

使用 NuxtChild 或 router-view

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

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

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

或者像这样

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

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

注意：我注意到在我的例子中，NuxtChild 和 Nuxt 的工作速度比 router-view 慢，但是使用 router-view 可能会导致一些 Nuxt 功能无法工作，所以由你来决定使用什么。

Answer 3

使用带有 slots 的自定义 Vue 组件。

这是我的

Default.vue

组件的示例：

<template>
  <!-- 
    Note: This is not a typical Nuxt template
    It is just a custom vue component with a slot (https://v2.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

  。

Answer 4

你必须在

child-component.vue

中使用这个：

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

Answer 5

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

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

Answer 6

总的来说，如果你想在 Vue 中传递一些状态，你需要使用 props down/emit up 模式。

如果您没有一种简单的方法将某些状态传递给直接父级，最简单的解决方案仍然是使用 Vuex（顺便说一句，它不是事件总线）。
即使有一些奇怪的方法可以实现它，我也不建议您和您的团队在可读性和复杂性方面使用它。

Answer 7

Nuxt 2

它没有很好的记录或暗示，但是，它的工作方式与 Vue 中的完全相同，因为它是一个 Vue 框架;)

家长：

<template>
  <div>
    <child-component :prop="{ message: `text`}" />
  </div>
</template>

孩子：

<template>
  <div>{{ prop }}</div><!-- will output : { message: `text`} -->
</template>
<script>
export default {
  props: {
    prop: {
      default: () => {}, // must be a function
      type: Object, // String, Array, Object, Number etc.
    },
  },
};
</script>