概要
http://localhost:3000/sample?hoge=abc123
のようにRequestされた場合に、 abc123
を画面に表示してみる
asyncDataを使う
pageコンポーネントの場合、asyncDataというメソッドを使うと、Context経由でリクエストの情報を取得できる。
asyncDataはレンダリング前に呼びだれ、結果はdataとマージされる。
Queryパラメータの場合は context.query
で取得できる
pages/sample.vue
はこんな感じになる。
<template> <div> <p>hoge: {{hoge}}</p> </div> </template> <script> export default { data: function() { return { // asyncDataで上書きされる hoge: 'default' } }, asyncData(context) { return { // asyncDataでreturnすると、dataにマージされる hoge: context.query['hoge'] } } } </script>
http://localhost:3000/sample
だと「default」が表示されるが、 ?hoge=abc123
をつけると、「abc123」が表示されるようになる。
なお、下記のようにも書ける。
// 最初からqueryを使っちゃう asyncData({ query }) { return { hoge: query['hoge'] } }
propsでサブコンポーネントに値を受け渡す
asyncDataは pageコンポーネントでしか使えないみたい。
propsを使えばサブコンポーネントに値を受け渡すことができる。
サブコンポーネントの作成
サブコンポーネントを components/Sample.vue
として作成する。
propsを宣言しておくと値を外から受け取れるようになり、dataと同じように扱える。
今回は hogeFromPage
という名前で受け渡すようにする。
<template> <p>hoge from page: {{hogeFromPage}}</p> </template> <script> export default { props: ['hogeFromPage'] } </script>
Pageコンポーネントから値を受け渡す。
propsは <sample hogeFromPage='hello!' />
のような形式で渡せるようになるのだけど、VueComponentの値を渡すときは v-bind
を使えばよさそう。
<template> <div> <!-- v-bindで値を渡す --> <!-- <sample hogeFromPage='hello!' /> --> <sample v-bind="{'hogeFromPage': hoge}" /> </div> </template> <script> // サブコンポーネントをimport import sample from '~/components/Sample' export default { data: function() { return { hoge: 'default' } }, // サブコンポーネントの利用 components: { sample }, asyncData(context) { return { hoge: context.query['hoge'] } } } </script>
これでhogeの値をサブコンポーネントでも使えるようになるはず。
注意点としては 親コンポーネントからサブコンポーネントへの依存が発生してしまう こと。
親が子のことを意識しなければいけなくなるので、利用は慎重にした方がよさそう。