You should typically register your components in the boot method of your package's service provider:. Alternatively, you may use the componentNamespace method to autoload component classes by convention. This will allow the usage of package components by their vendor namespace using the package-name:: syntax:. Blade will automatically detect the class that's linked to this component by pascal-casing the component name.
Subdirectories are also supported using "dot" notation. To display a component, you may use a Blade component tag within one of your Blade templates.
Blade component tags start with the string x- followed by the kebab case name of the component class:. 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:.
You should define the component's required data in its class constructor. All public properties on a component will automatically be made available to the component's view. It is not necessary to pass the data to the view from the component's render method:. When your component is rendered, you may display the contents of your component's public variables by echoing the variables by name:.
Component constructor arguments should be specified using camelCase , while kebab-case should be used when referencing the argument names in your HTML attributes. For example, given the following component constructor:. Since some JavaScript frameworks such as Alpine. For example, given the following component:. In addition to public variables being available to your component template, any public methods on the component may be invoked. For example, imagine a component that has an isSelected method:.
You may execute this method from your component template by invoking the variable matching the name of the method:. Blade components also allow you to access the component name, attributes, and slot inside the class's render method. However, in order to access this data, you should return a closure from your component's render method. This array will contain several elements that provide information about the component:.
The attributes element will contain all of the attributes that were present on the HTML tag. The closure should return a string. If the returned string corresponds to an existing view, that view will be rendered; otherwise, the returned string will be evaluated as an inline Blade view. If your component requires dependencies from Laravel's service container , you may list them before any of the component's data attributes and they will automatically be injected by the container:.
We've already examined how to pass data attributes to a component; however, sometimes you may need to specify additional HTML attributes, such as class , that are not part of the data required for a component to function. Typically, you want to pass these additional attributes down to the root element of the component template.
For example, imagine we want to render an alert component like so:. All of the attributes that are not part of the component's constructor will automatically be added to the component's "attribute bag".
All of the attributes may be rendered within the component by echoing this variable:. Sometimes you may need to specify default values for attributes or merge additional values into some of the component's attributes.
To accomplish this, you may use the attribute bag's merge method. This method is particularly useful for defining a set of default CSS classes that should always be applied to a component:. Sometimes you may wish to merge classes if a given condition is true. You can accomplish this via the class method, which accepts an array of classes where the array key contains the class or classes you wish to add, while the value is a boolean expression. If you need to merge other attributes onto your component, you can chain the merge method onto the class method:.
When merging attributes that are not class attributes, the values provided to the merge method will be considered the "default" values of the attribute. However, unlike the class attribute, these attributes will not be merged with injected attribute values. Instead, they will be overwritten. For example, a button component's implementation may look like the following:. To render the button component with a custom type , it may be specified when consuming the component.
If no type is specified, the button type will be used:. If you would like an attribute other than class to have its default value and injected values joined together, you may use the prepends method.
In this example, the data-controller attribute will always begin with profile-controller and any additional injected data-controller values will be placed after this default value:. You may filter attributes using the filter method. This method accepts a closure which should return true if you wish to retain the attribute in the attribute bag:.
For convenience, you may use the whereStartsWith method to retrieve all attributes whose keys begin with a given string:. Conversely, the whereDoesntStartWith method may be used to exclude all attributes whose keys begin with a given string:.
Using the first method, you may render the first attribute in a given attribute bag:. If you would like to check if an attribute is present on the component, you may use the has method. This method accepts the attribute name as its only argument and returns a boolean indicating whether or not the attribute is present:.
By default, some keywords are reserved for Blade's internal use in order to render components. The following keywords cannot be defined as public properties or method names within your components:.
You will often need to pass additional content to your component via "slots". To explore this concept, let's imagine that an alert component has the following markup:. Sometimes a component may need to render multiple different slots in different locations within the component. Let's modify our alert component to allow for the injection of a "title" slot:.
You may define the content of the named slot using the x-slot tag. If you have used a JavaScript framework such as Vue, you may be familiar with "scoped slots", which allow you to access data or methods from the component within your slot. In this example, we will assume that the x-alert component has a public formatAlert method defined on its component class:. Like Blade components, you may assign additional attributes to slots such as CSS class names:. To interact with slot attributes, you may access the attributes property of the slot's variable.
For more information on how to interact with attributes, please consult the documentation on component attributes :. For very small components, it may feel cumbersome to manage both the component class and the component's view template.
For this reason, you may return the component's markup directly from the render method:. To create a component that renders an inline view, you may use the inline option when executing the make:component command:. Similar to inline components, anonymous components provide a mechanism for managing a component via a single file. However, anonymous components utilize a single view file and have no associated class. You may use the. With PHP, there are two basic ways to get output: echo and print.
In this tutorial we use echo or print in almost every example. So, this chapter contains a little more info about those two output statements. They are both used to output data to the screen. The differences are small: echo has no return value while print has a return value of 1 so it can be used in expressions.
The echo statement can be used with or without parentheses: echo or echo. The following example shows how to output text with the echo command notice that the text can contain HTML markup :. Case 1 will be better. This is the same concept as android inflating layout by xml , or programmaticlly making the UI. But if you use php, to execute it, this will be using your servers resources and be computing. This is how it should be done: index.
Leave that outside of your PHP. Escaping to PHP is a waste if all you are going to do is pass in static text or static html. This means your website is slower and you are wasting electricity if you are passing large amounts of static text to PHP for no reason. Sometimes there is a reason. The way I like to do this is with an MVC framework.
In particular, the closing braces are often hard to understand when they show up in big piles of HTML. Notice how uninformative the closing brace is? We don't know if it is closing a loop or an if statement. You might have to turn short tags on in php. Once turned on, short tags make everything even more readable. Taking our last loop example just the part inside the loop , short tags allow us to reduce:.
Which is amazingly readable. Templating systems, however, are way outside the scope of the original question which I left a while ago anyway. You're learning, forget about performance in PHP pages. Instead, choose the way that is easiest to read. Looking at your two examples the second one is most definitely easiest to read, though I think that's because of the spacing you've used.
You say you're looking to develop good habits from the start, I think your time can be better spent by making your code read well. This might mean rewriting a section several times until you're happy with it. If you're really keen on the behind-the-scenes, I'll have a go at explaining what happens with static content in a PHP page. One part of this is to turn any static text into an echo.
There's a very small cost associated with the parsing, but no difference in executing the resulting code. If you're using a PHP accelerator the parsing is only done once and then cached, so you would see no performance difference after the first page load.
There are several reasons for this, but the main one is that it is easier, especially in the long run, to maintain code if the HTML and PHP code is separated. Technically, however, it makes absolutely no difference how you output stuff. To PHP it is just bytes in a row. It is usually used in creating templates. To answer your question simply: given your example code, there will be little if any difference in perfomance.
Who will be faster? Difficult to determine. I agree with others saying each has their strengths and weaknesses and can work really well together. PHP is programmable and can do calculations and work with variables.
Most of the time you would have your HTML outside. You would create a page just as you would if you were not using PHP, then add the PHP into the areas of the document where you need it.
You can have several chunks of PHP within a document.
0コメント