Laravelにおいてblade componentあるいはVue componentへ値を渡す方法

"laravel コンポーネント props"と調べると、Vueへの変数の渡し方しか出てこないので、
blade componentへの変数の渡し方とまとめて投稿します！

1. blade componentへの渡し方

1.文字列

parent.blade.php

<component-name property_name="渡したい文字列" />

セミコロンは必要ありません。

2.PHPの変数

parent.blade.php

<component-name :property_name="$value" />

セミコロンが必要です。

その他

値を受け取ったblade component内ではローワーキャメルケースになります。

component-name.blade.php

<div>{{ $propertyName }}</div>

2. Vue componentへの渡し方

1.文字列

parent.blade.php

<VueTemplate v-bind:property='文字列' :shorten_property='文字列'/>

v-bindは省略できます。

2.PHPの変数

parent.blade.php

<VueTemplate :property='$value'/>

3.Laravelのヘルパー関数

parent.blade.php

<VueTemplate :route="'{{ route('user.create') }}'" />

'{{ }}'で囲ってあげる。

その他

値を受け取ったVue component内ではローワーキャメルケースになります。
1のbladeファイルと同じ。

VueComponent.vue

export default {
    props: {
        shortenProperty: String,
    }