内容
LaravelのBladeからVueコンポーネントへの値の渡し方について。
比較）LaravelのBladeコンポーネントへの値の渡し方
比較）Vueの親コンポーネントから子コンポーネントへの値の渡し方
この違いがいつも混同するのでまとめる。
目次
Laravel・BladeからVueコンポーネントへ値を渡す
Bladeの記述
（コントローラーから変数（$test_variable）と配列（$test_array）を運んできていると仮定）
sample.blade.php
<sample-component :test-attribute='@json($test_variable)':array-attribute='@json($test_array)'>
- Vueコンポーネント：ケバブケース
- 属性名：ケバブケース
- 変数名：コントローラーから渡してきた変数名
- 注意）属性名の部分は '（シングルクォート）を使うこと（エディタの保管に注意）
- 補足１）
'@json($変数名)'の部分は、"'{{ $変数名(文字列) }}'"もしくは"{{ $変数名(数値) }}"でもよい。文字列は'が必要で、数値は'が不要な点に注意！ - 補足２）補足１は配列の時は使用できない。
- 補足３）boolは数字に変換されてしまうので、書くのであれば
{{ ($boolean) ? 'true' : 'false' }}と書く必要がある。 - 補足４）
@json($変数名)を使うと数値も文字列も配列もboolもそのまま渡せるので、結局のところ一番ラク。
Vueコンポーネントの記述
SampleComponent.vue
<template>
<p>{{ testAttribute }}</p>
</template>
<script>
export default {
props: {
testAttribute: String,
arrayAttribute: Array,
}
}
</script>
- ファイル名：アッパーキャメルケース
- 変数名：キャメルケース（Bladeの属性名がここに来る）
Laravel・BladeからBladeコンポーネントへ値を渡す
Bladeの記述
（コントローラーから変数（$test_variable）を運んできていると仮定）
sample.blade.php
<x-directory.sanmple-conponent :test-attribute="$test_variable"></x-sanmple-conponent>
- Bladeコンポーネント名：
<x-ディレクトリ名.ケバブケース> - 属性名：ケバブケース（スネークケースでも動くが、ケバブケースが良い）
- 変数名：コントローラーから渡してきた変数名
Bladeコンポーネント
resources/views/components/directory/sample-conponent.blade.php
{{ $testAttribute }}
- 変数名：キャメルケース（属性名の部分がここに来る）
Vueの親コンポーネントから子コンポーネントへ値を渡す
親コンポーネント
parent.vue
<chiled-component :test-attribute='testVariable'>
- 子コンポーネント名：ケバブケース
- 属性名：ケバブケース
- 変数名：キャメルケース
子コンポーネント
child.vue
<script>
export default {
props: {
testAttribute: String,
}
}
</script>
- 変数名：キャメルケース（Bladeの属性名がここに来る）