駆け出しエンジニアの勉強記録

アラフォー女の未経験すぎる業界での勉強記録

【Vue3】 Composition API でのデータの受け渡しについて

コントローラーに定義した例が以下の場合、

return Inertia::render('Employee/Edit', [
            'company' => $select_company,
            'employee' => $employee,
            'prefectures' => config('params.prefectures'),
            'sex' => config('params.sex'),
            'status' => session('status'),
            'departments' => $departments,
            'affiliations' => $affiliations,
]);  

中身が$変数の場合
'company' => $select_company,
'employee' => $employee,
'departments' => $departments,
'affiliations' => $affiliations,
はconstで定義する。
ーーーーーーーーーーーーーーーーーーーーーーーー

const departments = usePage().props.departments;
const affiliations = usePage().props.affiliations;

ーーーーーーーーーーーーーーーーーーーーーーーー

コンポーネント内で利用する為にコンポーネント内で定義されたデータの場合、
'prefectures' => config('params.prefectures'),
'sex' => config('params.sex'),
'status' => session('status'),
はdefinePropsで定義し型を明示的にする。
ーーーーーーーーーーーーーーーーーーーーーーーー
defineProps({
    prefectures: {
        type: Object,
    },
    sex: {
        type: Object,
    },
     status: {
        type: String,
    },   
});
ーーーーーーーーーーーーーーーーーーーーーーーー