[Laravel進階] Livewire核心觀念3:組件渲染

###### tags: `Laravel教學已拍` # [Laravel進階] Livewire核心觀念3:組件渲染大家好，我是哥布林工程師，今天繼續來分享Livewire，來聊聊組件渲染相關的一些知識點對了如果你是第一次來到我們頻道的話，歡迎收看我們的課程哥布林挨踢頻道是專注於電腦科學相關的課程每週四下午6點都有新的影片上線如果聽完今天的單元覺得對你有幫助的話請幫忙給影片按著讚並訂閱我們的頻道唷 ## 加入組件到視圖首先，如果要加入Livewire組件，最簡單的方式就是使用 `<livewire:組件名稱>` 標籤，像是這樣: ``` <div> <livewire:show-posts /> </div> ``` 或者也可以使用 Blade 的 @livewire 指令 `@livewire('show-posts’)` 事實上這兩個寫法的功能都是相同的，不過要採用標籤的形式來撰寫是限定 Laravel 7 以上的版本，這點請特別注意假如你的 Livewire 組件是放在子資料夾內，可以在名字前透過點語法來說明其完整的命名空間為何，像這樣 `<livewire:nav.show-posts />` ## 傳入參數接著來聊聊傳入參數的知識點為了讓組件更為好用，你往往需要傳入額外參數到組件內來達到傳遞資料的目的，接著就來舉個例子，假如我們有一個 show-post 組件，能夠這樣寫來傳入 $post 模型 `<livewire:show-post :post="$post”>` 如果是 Blade 指令的版本，則可以這樣寫 `@livewire('show-post', ['post' => $post])` 你可能會想知道，如果參數傳入之後，組件將要怎麼接收參數呢? 很簡單， Livewire 將會自動將參數分配給同名的屬性，比如像剛才的例子，假如 show-post 組件有一個同樣名為 $post 的屬性，它將會被自動的賦值 ``` class ShowPost extends Component { public $post; ... } ``` 假如很不幸的，因未知原因自動賦值失敗的話，沒關係，你還是可以透過 mount() 來自己完成賦值，像是這樣 ``` class ShowPost extends Component { public $title; public $content; public function mount($post) { $this->title = $post->title; $this->content = $post->content; } ... } ``` 那什麼情況會導致賦值失敗勒? 根據我的測試如果你的參數名稱有下橫線的話就會無法正常傳值所以命名時請特別注意既然說到 mount() ，有件事你應該要知道在 Livewire 組件中，你應該使用 mount() 而非建構子 __construct() 來完成屬性的初始化工作。而它就如同控制器的方法一樣，你能夠利用型別提示的依賴注入技巧在參數上 ``` use \Illuminate\Session\SessionManager; class ShowPost extends Component { public $title; public $content; public function mount(SessionManager $session, $post) { $session->put("post.{$post->id}.last_viewed", now()); $this->title = $post->title; $this->content = $post->content; } ... } ``` ## 從路由設定組件接著聊聊渲染與路由有關的知識點，假如整個頁面就是一個 Livewire 組件，你其實能夠在路由規則上直接傳入組件，將之當作控制器使用，省去還要額外撰寫控制器類別 ``` //routes\web.php Route::get('/post', ShowPosts::class); ``` 預設情況下， Livewire 將會渲染 ShowPosts 組件的內容到 {{ $slot }}，也就是插槽，預設的視圖為 resources/views/layouts/app.blade.php，這個檔案裡頭的內容會像這樣 ``` <head> @livewireStyles </head> <body> {{ $slot }} @livewireScripts </body> ``` 假如因為專案的需要，你想要改用其他視圖檔案而非預設的 layouts/app.blade.php，你能夠複寫 livewire.layout 設定檔的畫面這個選項來達到 `'layout' => ‘app.other_default_layout' ` 而如果你希望動態的調整而不透過設定，也就是在程式中去判斷要使用的視圖，你能夠在 render() 後面接著使用 layout()，像是這樣 ``` class ShowPosts extends Component { ... public function render() { return view('livewire.show-posts') ->layout('layouts.base'); } } ``` 假如你使用的不是預設的組件插槽，你能夠接著呼叫 slot()來指定正確的插槽名稱 ``` public function render() { return view('livewire.show-posts') ->layout('layouts.base') ->slot('main'); } ``` 當然，Livewire 1.x所使用的傳統 Blade layout語法還是管用的，你依然可以使用 @extends，假如你的父視圖像這樣: ``` <head> @livewireStyles </head> <body> @yield('content') @livewireScripts </body> ``` 你就需要把 layout() 改成使用 extends() ``` public function render() { return view('livewire.show-posts') ->extends('layouts.app'); } ``` 假如你需要指定組件所要渲染的 section 為何，你也能夠透過 section() 來加以指定 ``` public function render() { return view('livewire.show-posts') ->extends('layouts.app') ->section('content'); } ``` 假如你需要從組件類別將資料傳入 layout ，也沒問題。你能夠接著呼叫 layout()，並透過其第二參數來傳遞資料 ``` public function render() { return view('livewire.show-posts') ->layout('layouts.base', ['title' => 'Show Posts']) } ``` 看起來 Livewire 所提供的組件渲染功能是非常完整的，不管你的專案再複雜都能夠加以因應才對 ## 取得路徑參數之前我們都是在控制器方法中去取用路徑參數，因為我們不再使用控制器， Livewire 會試著去模擬一個類似的行為，也就是透過 mount()，像這個例子: ``` //routes\web.php Route::get('/post/{id}', ShowPost::class); //app\Http\Livewire\ShowPost.php class ShowPost extends Component { public $post; public function mount($id) { $this->post = Post::find($id); } ... } ``` 你看， mount() 在組件中就扮演著類似控制器方法的角色，它同樣可以取用路徑參數。比如你訪問 /post/123， $id 參數傳入 mount() 將會包含123的這個值 ## Route Model Binding 說到 Laravel 所自帶的 Route Model Binding ，讓我們能夠便利的取得該主鍵的對應資料，而好消息是這個功能在 Livewire 同樣適用，請看下面這個例子: ``` //routes\web.php Route::get('/post/{post}', ShowPost::class); //app\Http\Livewire\ShowPost.php class ShowPost extends Component { public $post; public function mount(Post $post) { $this->post = $post; } } ``` 假如你用的是 PHP 7.4或者是以上版本，你還能夠針對類別屬性做型別提示， Livewire 也會自動地幫你進行 Route Model Binding。比如下面組件的 $post 屬性將會被自動注入，在 mount() 內不需要做任何事情，讓工作變得更為簡單但是特別提醒如果你環境的 PHP 版本低於7.4的話，將會出現語法錯誤的提示，表示你的 PHP 版本不足，請記得去做升級的動作 ``` //app\Http\Livewire\ShowPost.php class ShowPost extends Component { public Post $post; } ``` ## 組件的render() 最後聊一下 render() ，Livewire 組件的 render() 會在頁面初次載入的時候被呼叫。假如是很簡單的組件，你不需要自己定義 render()，因為生成的 Livewire 根組件就包含了一個動態的 render() 一般而言，在 render() 內被預期要回傳一個 Blade 視圖，因此，你能夠將之當做是一個控制器方法，請看下面這個例子: ``` //app/Http/Livewire/ShowPosts class ShowPosts extends Component { public function render() { return view('livewire.show-posts', [ 'posts' => Post::all(), ]); } } ``` ``` //resources/views/livewire/show-posts.blade.php <div> @foreach ($posts as $post) @include('includes.post', $post) @endforeach </div> ``` 至於組件視圖的部分，有一點是新朋友要特別注意的就是根據官方文件的記載請務必確認你的 Blade 視圖內只有一個根元素，以免出現錯誤而根據我自己做測試如果根元素有兩個以上的話組件內容是可以正常地顯示但會否導致其他功能出現錯誤就不清楚了建議還是最好避免，以免自爆另外，除了回傳 Blade 視圖檔案之外假如內容簡單的話，也可以在 render() 直接回傳一個包含 Blade 佈局的字串也就是所謂的 inline 組件關於 inline 組件更多的細節，可以參考我前一個關於建立組件的教學影片有需要的可以參考上方資訊卡 inline 組件的類別長的就像是這樣 ``` //app/Http/Livewire/DeletePost class DeletePost extends Component { public Post $post; public function delete() { $this->post->delete(); } public function render() { return <<<'blade' <div> <button wire:click="delete">Delete Post</button> </div> blade; } } ``` 這裡直接提供懶人包，如果需要生成 inline 組件的話，可以加入 --inline 選項，像這樣 php artisan make:livewire delete-post --inline 以上就是今天關於組件渲染的所有知識點如果你有任何問題歡迎在底下留言假如你覺得這個單元有讓你學到東西的話拜託給影片按個讚並訂閱我們的頻道您的支持是讓頻道繼續下去最大的動力我們下個單元再見，掰掰 ## 時間軸影片開始 00:00 加入組件到視圖 00:50 傳入參數 05:00 從路由設定組件 12:43 取得路徑參數 24:17 Route Model Binding 28:02 組件的render() 31:02 ## 相關鏈接【Livewire核心知識篇: 安裝與建立組件】 https://youtu.be/uHgFVTnSl5g 【Livewire快速入門】 https://youtu.be/H346Fat-0V0 【一頁式網站實作攻略】 https://youtu.be/wXg0ZdH9Kl0 【部落格網站實作攻略】 https://youtu.be/Jv7JPnWwxYg ## 行銷稿各位朋友晚安，我是每天在空中陪著你的哥布林工程師，又有新的消息想要和大家報告甚麼消息呢? 你猜猜今天是禮拜幾? 星期四，猜對了。也就是哥布林挨踢頻道發布新影片的日子，這周的影片就在剛剛上線拉，而這件事情讓我非常的興奮~ 影片的主題是談 Livewire 組件的渲染，目的在讓你明白該如何在視圖去使用組件。這主題很有用，但不是讓我興奮最主要的原因我掛保證的告訴大家，這支影片是我從開始錄製影片以來最好的一支影片從企劃 . 試拍 . 練習流程 . 正式拍攝 . 素材製作 . 口白優化 . 影片後製這裡頭的每一個環節，都做了新的嘗試以及優化，目的是希望讓想要學習技術的朋友，能夠有更好的學習體驗如果今天晚上沒有約會的話，何不花個35分鐘看下這支影片，累積自己的技術實力絕對是最好的投資，你說對嗎? 終於要把這份成果交給大家去評比，你覺得這支影片對你的學習有幫助嗎? 不管你是喜歡或者是覺得有那些地方可以改進，都歡迎留言告訴我唷! https://youtu.be/ifz8xUPYQTA

Read more

[Laravel進階] Livewire核心知識篇2: 安裝與建立組件

[Laravel入門]部落格從零開始實作攻略 #by Voyager

[Laravel入門]一頁式網站的從零出發實作指南 #by Voyager

Youtube頻道會員守則