---
# System prepended metadata

title: laravel component
tags: [Laravel]

---

# laravel component
https://hackmd.io/@javck/ByJgF8HRP/%2FQ4THMvbaSnCDfpAqUMLv6w

https://www.youtube.com/watch?v=VJ1yeoJqpr0


## slot 跟 自訂blade語法
![](https://i.imgur.com/IVl9ITV.png)
![](https://i.imgur.com/sGAiZX9.png)

簡單使用
直接{{ 名稱}}

@slot(名稱) 去放東西
自定義模板也算是component 因為一樣有導入別的blade
也許inject也能用還沒用過

這是因為他是5.8

7以後面變成
![](https://i.imgur.com/v37mrl1.png)
變數用:

可看文章就知道差異了
https://jntng.coderbridge.io/2020/09/09/laravel-7-blade-component/?utm_source=coderbridge-io&utm_medium=blog_related_post_title&utm_campaign=TechBridge%20%E6%8A%80%E8%A1%93%E5%85%B1%E7%AD%86%E9%83%A8%E8%90%BD%E6%A0%BC_Laravel%207%20Blade%20Component_@Jing-Teng


## 介紹
創建會有兩個文件

x開頭
大駝峰class對應的是-
ex
AlearMessage

等於

x-alear-message

## app底下的compoment

rander是對應的view

## 如何傳data
第一步先在建構子建立名稱

第二步在
html上面寫你要傳入的值

view就能使用了

## function使用
不停情況不同class
可以寫function判斷
然後直接在blade呼叫function
![](https://i.imgur.com/jkgiqVz.png)
這個type 是從外面傳入的


## html使用表達式
前面加上冒號
跟vue一樣作法


## slot
html裡面寫的可以替換slot
跟vue一樣

## $attribute
一般你寫在html會沒有反應
但你加上這個 就能傳入blade內了
![](https://i.imgur.com/DkXQEl4.png)

**注意{{ $attribute }}**
會覆蓋

寫前面外面覆蓋裡面
![](https://i.imgur.com/RRLwaqz.png)
裡面覆蓋外面
![](https://i.imgur.com/5EBrcuC.png)

一起用merge
![](https://i.imgur.com/V6pHxJI.png)

## 特別用法
![](https://i.imgur.com/FIoG2E2.png)
但這等於上面blade跟app的compomemt合併
不推薦這寫法


## 如果component要分資料夾呢
原本是在view/component
但如果要分開
變成view/ui/component呢

在blade引入的時候加入前墜
Ex

x-ui.alear等於上面那個(用. 跟blade一樣)
![](https://i.imgur.com/zgir1HB.png)


## 不用其他用法 直接綁定
![](https://i.imgur.com/bNkfTnw.png)








###### tags: `Laravel`