บทความ

ส่วนประกอบของ Laravel คืออะไรและใช้งานอย่างไร

ส่วนประกอบของ Laravel เป็นคุณลักษณะขั้นสูง ซึ่งเพิ่มเข้ามาโดย laravel เวอร์ชันที่เจ็ด ในบทความนี้ เราจะมาดูกันว่าส่วนประกอบคืออะไร วิธีสร้าง วิธีการใช้ส่วนประกอบในโมเดลเบลด และวิธีการกำหนดพารามิเตอร์ให้กับส่วนประกอบโดยการส่งพารามิเตอร์

ส่วนประกอบ Laravel คืออะไร?

คอมโพเนนต์คือโค้ดส่วนหนึ่งที่เราสามารถนำมาใช้ซ้ำได้ในเบลดเทมเพลตใดๆ เป็นบางอย่างเช่นส่วน เลย์เอาต์ และการรวม ตัวอย่างเช่น เราใช้ส่วนหัวเดียวกันสำหรับแต่ละเทมเพลต เราจึงสามารถสร้างส่วนประกอบส่วนหัวซึ่งเราสามารถนำมาใช้ซ้ำได้

การใช้ส่วนประกอบอื่นเพื่อความเข้าใจที่ดีขึ้นก็เหมือนกับที่คุณต้องใช้ปุ่มลงทะเบียนบนเว็บไซต์ในหลาย ๆ ที่ เช่น ในส่วนหัว ส่วนท้าย หรือที่อื่น ๆ บนเว็บไซต์ ดังนั้นสร้างส่วนประกอบของรหัสปุ่มนั้นและนำกลับมาใช้ใหม่

วิธีสร้างส่วนประกอบใน Laravel

ตัวอย่างเช่น ลองสร้างส่วนประกอบ Header กับ'Artisan:

php artisan make:component Header

คำสั่งนี้สร้างสองไฟล์ในโครงการ laravel ของคุณ:

ไฟล์ PHP ที่มีชื่อ Header.php ภายในไดเร็กทอรี app/http/View/Components;
และไฟล์เบลด HTML ที่มีชื่อ header.blade.php ภายในไดเร็กทอรี resources/views/components/.

คุณยังสามารถสร้างส่วนประกอบในไดเร็กทอรีย่อย เช่น:

php artisan make:component Forms/Button

คำสั่งนี้จะสร้างส่วนประกอบของปุ่มในไดเร็กทอรี App\View\Components\Forms และไฟล์เบลดจะถูกวางไว้ในไดเร็กทอรี Resource/views/components/forms

สำหรับการแสดงผลส่วนประกอบในไฟล์เบลด HTML เราจะใช้ไวยากรณ์นี้:

ตัวอย่างส่วนประกอบ Laravel

ก่อนอื่น เราใส่โค้ด HTML บางส่วนลงในไฟล์ header.blade.php ของส่วนประกอบ

<div><h1> Header Component </h1></div>

ตอนนี้สร้างไฟล์มุมมอง users.blade.php ในโฟลเดอร์สินทรัพย์ ซึ่งเราสามารถใช้ส่วนประกอบส่วนหัวได้

<x-header /><h1>User Page</h1>

ขณะนี้ผ่านระบบของ การกำหนดเส้นทาง ของ laravel เราเรียกเบลดเพื่อแสดงผลในเบราว์เซอร์

วิธีส่งข้อมูลไปยังส่วนประกอบ Laravel

ในการส่งข้อมูลไปยังส่วนประกอบ Blade มีการใช้ไวยากรณ์ต่อไปนี้ โดยระบุค่าที่เกี่ยวข้องกับพารามิเตอร์ภายในองค์ประกอบ HTML:

<x-header message=”Utenti” />

ตัวอย่างเช่น เราใช้ส่วนประกอบก่อนหน้าในไฟล์ users.blade.php

คุณควร definish ข้อมูลคอมโพเนนต์ในไฟล์ header.php ข้อมูลตัวแปรสาธารณะทั้งหมดพร้อมใช้งานโดยอัตโนมัติสำหรับมุมมองคอมโพเนนต์

เพิ่มรหัสในไฟล์ header.php ภายในไดเรกทอรี app/http/View/Components/ .

<?php

namespace App\View\Components;
use Illuminate\View\Component;

   class Header extends Component{

   /*** The alert type.** @var string*/

   public $title = "";

   public function __construct($message){

   $this->title = $message;

   }
}

อย่างที่คุณเห็น เมธอดตัวสร้างของคลาสตั้งค่าตัวแปร $title ด้วยค่าพารามิเตอร์ที่ส่งไปยังส่วนประกอบ ตอนนี้เพิ่มตัวแปร $title ในไฟล์ส่วนประกอบ header.blade.php เพื่อแสดงข้อมูลที่ผ่านมา

<div> <h1> {{$title}}'s Header Component </h1> </div>

ตอนนี้ข้อมูลส่วนประกอบที่ส่งนี้จะแสดงในเบราว์เซอร์

ในทำนองเดียวกัน คุณสามารถใช้คอมโพเนนต์นี้ในเพจการแสดงภาพอื่นที่มีข้อมูลต่างกัน โดยสร้างไฟล์การแสดงภาพอีกไฟล์หนึ่ง blade contact.blade.php และเพิ่มรหัสส่วนประกอบด้านล่างเพื่อแสดงข้อมูลที่ส่งผ่าน