web-dev-qa-db-ja.com

小道具を<nuxt />コンポーネントページに渡す方法

誰かが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、小道具が必要に応じて子ページに渡されません。

議論はすでに行われています ここ が、チケットには結論がないようです。これを達成するための有効な手段のトラブルシューティングはまだできません。

投稿しますが、Nuxt.js開発者の考えを知りたいですか？

nuxt.js
4
CodeUK

javaScript部分でキャメルケースを使用する必要があります

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

ページのコンポーネント間でデータを渡すには、Vuexストアを使用する方法もあります https://nuxtjs.org/guide/vuex-store/

7
Nicolas Pennec