概要
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の値をサブコンポーネントでも使えるようになるはず。
注意点としては 親コンポーネントからサブコンポーネントへの依存が発生してしまう こと。
親が子のことを意識しなければいけなくなるので、利用は慎重にした方がよさそう。
