Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Ronaldo100's avatar

stupid question: What is @props importing?

Hello :)

I am just re-watching a very long Laravel tutorial in the form of a video.

To make sure I really understand everything, I am writing down notes for myself, so that I can be sure that I...

a) ...understood everything

b) ...can look it up in the future

While writing down the notes, I just realized, that I am doing something, which I don't fully get.

The tutorial is just at the part where Blade Components get created.

At the top of the Blade Component, the teacher added:

@props(['foobar'])

This is where I just realized: I am not 100% sure where this is coming from.

Is this coming from the VIEW "foobar.blade.php"?

Or is this coming from the MODEL "foobar"?

Unlikely but still an option: Does this have anything to do with the Controller "foobar"?

What am I really importing here?

Thanks,

Ronaldo

0 likes
8 replies
tykus's avatar
tykus
3 years ago
Best Answer
Level 104

None of the above. The @props directive in an anonymous component determines which attributes are to be considered data. From the example in the docs, type and message are to be considered as data

<x-alert type="error" :message="$message" class="mb-4"/>

so, the anonymous component defines both as props:

@props(['type' => 'info', 'message'])
 
<div {{ $attributes->merge(['class' => 'alert alert-'.$type]) }}>
    {{ $message }}
</div>

In this example, class is an attribute and is available from the Attributes Bag, so the resulting markup will be:

<div class="mb-4 alert alert-error">
   <!-- the value of $message variable -->
</div>
1 like
MohamedTammam's avatar

Sometimes when you're creating a component, you need to make it dynamic by passing data to it, right?

let's say you're making a link component and you need to pass the URL to it to make it dynamic like that.

<x-link :url="$some_url_value" />

To use that inside your component

@props(['url'])
<div class="some-amazing-styling">
	<a href="{{ $url }}">My Awesome Link</a>
</div>

Further reading: https://laravel.com/docs/9.x/blade#data-properties-attributes

1 like
Ronaldo100's avatar

Thank you @tykus and @MohamedTammam

@@tykus Is there any reason, you did not use : before type?

<x-alert type="error" :message="$message" class="mb-4"/>

In your example (and also in the docs - same example) there is a : before :message but none before type.

What's the reason for that? Is "type" some kind of protected attribute that works without : ?

PS.: How do y'all find everything so quickly in the docs??

I googled @props and specifically looked in the laravel 9 docs, but I did not find anything reasonable, whereas you two immediately told me where the specific section of the docs is.

How do you go about searching for things in the docs?

tykus's avatar

@Ronaldo100 if you notice that (in the example) the value passed to type is a simple string, "error", whereas the value passed to message is a variable $message. Any component attribute (or prop) can take a PHP expression by prepending the attribute name with :

Hard-coded, primitive values may be passed to the component using simple HTML attribute strings. PHP expressions and variables should be passed to the component via attributes that use the : character as a prefix

https://laravel.com/docs/9.x/blade#passing-data-to-components

I know the docs, because I read the docs and answering questions on this forum ingrains that knowledge.

If you question has been answered, please consider marking the thread closed 👍

1 like
MohamedTammam's avatar

@Ronaldo100 You use : when you want to type php expression, like a variable in that case. you don't need it when the value is a string.

For me, I searched for a lot of things in the docs many times before that's why I know where to find them back again.

And if I don't know in which page I do something like in the search engine laravel <something> and then open the first pages on the search and use ctrl+f to search for the word that I'm looking for in the docs.

1 like
Ronaldo100's avatar

Thanks, again @MohamedTammam :)

So, this is what you mean, right?

# No colon for strings
<x-test foo="bar" />

# Color for variables?
<x-test :foo="$bar" />
Ronaldo100's avatar

Thank you very, very much to BOTH of you, @tykus and @MohamedTammam

You both helped me so much with your nice answers, and both your answers were so great!

So, you both deserve to get the "best answer".

However, I just gave @MohamedTammam the "Best Answer" in my other posting, so, to keep it fair, I give this thread's "Best Answer" to @Tykus

I hope that's okay.

Thank you both!

Have a nice day :)

4 likes

Please or to participate in this conversation.