Question

是否有人能够将道具传递给Nuxt.js中的页面？

典型的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>

但是在布局<nuxt />中使用default.vue标记时，道具不会按原样传递到子页面。

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

会回复，但很想知道Nuxt.js devs对此的想法吗？

Answer 1

你必须在JavaScript部分使用camelCase

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

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

Answer 2

将自定义Vue组件与slots一起使用。

这是我的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的“继承”。

Answer 3

您必须在child-component.vue中使用它：

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

Answer 4

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

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

如何将道具传递给<nuxt>组件页面

4 个答案: