如何将 props 传递给 <nuxt/>组件页面 [英] How to pass props to <nuxt /> component pages

问题描述

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

典型的 Vue.js props 可以这样传递:

//父组件.vue<child-component :basket-count=items.length"/><脚本>从 './child-component' 导入 ChildComponent导出默认{数据 () {项目: [{}， {}]},组件: {childComponent: 子组件}}//子组件.vue<p>您的购物篮中有 {{basketCount }} 件商品</p><脚本>导出默认{道具: ['篮子计数']}

但是当在布局 default.vue 中使用 <nuxt/> 标签时，props 不会像它们应该的那样传递给子页面.>

讨论已经这里，但是票似乎没有结论.我还不能解决实现这一目标的可行方法.

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

解决方案

JavaScript部分必须使用camelCase

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

Has anyone been able to pass props to pages in Nuxt.js?

Typical Vue.js props can be passed as so:

// 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>

But when using the <nuxt /> tag in a layout default.vue, props do not get passed to the children pages as they should.

Discussion has taken place already here, but the ticket appears to have no conclusion. I cannot yet troubleshoot a working means of achieving this.

Will post back, but curious to know thoughts from Nuxt.js devs on this?

解决方案

you have to use camelCase in JavaScript part

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

To pass data between components of page, another way is to use a Vuex Store https://nuxtjs.org/guide/vuex-store/

这篇关于如何将 props 传递给 <nuxt/>组件页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！