LaravelからVueに値を渡す時によくやる手法は次です。
1 2 3 4 5 6 7 | <upload-image v-bind:dist-url="{{json_encode(route('hoge.update'))}}" v-bind:hoge="{{json_encode($hoge)}}" v-bind:fuga="{{json_encode($fuga)}}" ... ...></upload-image> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <template> <div> {{ hoge }} {{ fuga }} ... ... </div></template>export default { props: { distUrl: {type: String, default: ''}, hoge: {type: String, required: true}, fuga: {type: String, required: true}, ... ... }, |
引数をjson化してpropsとして渡し、Vue内のテンプレートに埋め込みます。やり方はシンプルなのですが情報が増えるにつれpropsの肥大化がひどいことになります。なんらかのオブジェクトにまとめるのも手ですが、それはそれでバリデーションが辛くなります。この問題の回答の一つがVueのslotの仕組みを使うことです。
スロット — Vue.js
slotは指定された位置のHTMLコードをVueコンポーネントを呼び出す階層から決定するための仕組みです。そのため先ほどの例ならば次の様に書けます。
1 2 3 4 5 6 7 8 9 10 | <upload-image v-bind:dist-url="{{json_encode(route('hoge.update'))}}"> <div slot="slot-no-namae"> {{ $hoge }} {{ $fuga }} ... ... </div></upload-image> |
1 2 3 4 5 6 7 8 9 | <template> <div> <slot name="slot-no-namae"/> </div></template>export default { props: { distUrl: {type: String, default: ''}, }, |
Blade上のHTMLエスケープエコーの短縮構文{{}}を実行してHTMLコードを生成。それのHTMLコードをslotに割り当てます。これにより、propsを介することなくPHP内部で扱っていた変数の値を持つHTMLコードをVue上で組んでwebページのテンプレート内に組み込めました。propした値を後から変更しない、Vue内の関数で参照する予定が無い、といった値は大体この方法に組み込むとスッキリしつつ問題のないコードを作るのに貢献してくれます。
