تمرير بيانات إلى Component مع قيمة افتراضية

إذا أردت أن يدعم نفس ال Component أنواع مختلفة من الرسائل

يمكنك تعريف البيانات التي يستقبلها باستخدام @props

داخل ملف

resources/views/components/alert.blade.php

نكتب

@props(['type' => 'info'])

<div {{ $attributes->merge(['class' => 'alert alert-' . $type]) }}>
  {{ $slot }}
</div>

ثم نحدد نوع الرسالة عند الاستخدام

<x-alert type="success">
  Your Changes Have Been Saved
</x-alert>

وإذا لم نحدد النوع سيستخدم القيمة الافتراضية info

<x-alert>
  Please Read The Instructions
</x-alert>

وإذا كانت القيمة موجودة داخل متغير نستخدم : قبل اسم الخاصية لتمرير قيمة المتغير

<x-alert :type="$messageType">
  {{ $message }}
</x-alert>

ملحوظة

تحتاج إلى تعريف تنسيقات مثل alert-success و alert-info داخل ال CSS حتى يختلف شكل الرسالة حسب النوع