Fundamentally, Components don't do anything you couldn't also accomplish with partials and Composers, but they provide system of interaction and a mental model that can be more intuitive. Like Composers and Blade templates, Components are an extension of the Laravel feature, so the Laravel documentation applies.
Generally a Component consists of:
- A Blade template in
- A Composer-like class in
The easiest way to create a component is with WP-CLI:
Sage also ships with some examples.
You can also create inline and anonymous components, which forgo the template or class respectively. These would need to be created manually (the WP-CLI command only creates "traditional" components).
A Component in action in a Blade template will look something like this:
The template for that Component might look like this:
In turn, the class might look like this:
Argument and attribute names
The names of the arguments in the definition of your Component's
__construct() method must match the names of the attributes you use to pass data to your Component tag.
Component constructor arguments should be specified using
kebab-case should be used when referencing the argument names in your HTML attributes. Laravel documentation
In the above example
will work, but
will throw an error.
The attributes used to pass data to your Component tag can be in any order, so long as the names are correct:
These are equivalent.
By default, anything passed to an attribute on a Component tag will be treated as a string. So if you do this:
Your component will treat that as a string containing
$variable, not whatever the contents of
If you need to pass non-string data, just prefix your attribute with a colon, and its value will be evaluated as PHP:
Because your argument is now evaluated as PHP, you don't want to pass a simple string, or PHP will try and evaluate it:
html <x-example-component :title="Uh oh"/>
This will throw an error when it tries to evaluate
Uh oh as PHP.
Data in views
The view for your Component
(in the above example,
does not receive the arguments you pass to the Component tag;
The data it has access to is limited to any
public properties you've set on your class.
So remember to set those properties, or your view won't have the data you need!
In the Component tag, you use attributes to pass data to your component, but you can also add other, arbitrary attributes as well.
These attributes will be put in an "attribute bag" which you can then access in your Component view with the special
If you echo the variable it will print out each attribute and its value, which is very useful for things like passing CSS selectors to your Components:
You can do many other things with attributes that are described in the Laravel documentation.
Help us continue to build and maintain our open source projects. We’re a small team of independent developers and every little bit helps.Sponsor Roots on GitHub