Làm cách nào để tạo một thành phần trong Livewire?

Question

Nếu bạn đã viết mã với Laravel một thời gian, bạn hẳn đã nghe nói về gói Laravel Livewire 'thần kỳ'. Livewire là một cách thực sự tuyệt vời (và gần như kỳ diệu) để tạo giao diện tương tác và giao tiếp 'thời gian thực' với phụ trợ Laravel của bạn. Và nó làm tất cả điều này một cách rất đơn giản. Trong bài viết này, tôi sẽ chỉ cho bạn kiến thức cơ bản về Laravel Livewire, để bạn có thể sử dụng Livewire ngay lập tức🚀

Nội dung chính Show

Thông tin cơ bản về Livewire
Cài đặt Livewire
Tạo các thành phần Livewire
Tạo thành phần tìm kiếm Livewire
Make sure your template file has one root element
Cách hiển thị thành phần Livewire
Sử dụng hành động
Sử dụng biểu mẫu với Laravel Livewire
Xác thực biểu mẫu thời gian thực & móc vòng đời Livewire
Bước tiếp theo
Làm thế nào để tạo các thành phần laravel?
Phương pháp gắn kết trong Livewire là gì?
Livewire hoạt động như thế nào?
Laravel Livewire có đáng không?

Sự kết hợp giữa tính đơn giản và sức mạnh là điều khiến Laravel Livewire trở nên tuyệt vời và tại sao nó lại được rất nhiều nhà phát triển sử dụng. Nó đặc biệt là một sự thay thế tốt cho sự kết hợp giữa Laravel + Inertia + Vue, đặc biệt nếu bạn vẫn quen dùng 'Vue-ma thuật', nhưng cảm thấy rằng Vue quá phức tạp để thiết lập

Thông tin cơ bản về Livewire

Điều đầu tiên bạn nên biết là Livewire hoạt động với cái gọi là thành phần. Điều đó có nghĩa là bạn có thể có một thành phần tìm kiếm, một thành phần chỉnh sửa, bạn đặt tên cho nó. Mỗi thành phần Livewire bao gồm (trong hầu hết các trường hợp) hai tệp

Tệp lớp thành phần
Tệp Blade có đánh dấu (HTML)

Ngoài ra, bạn cũng có thể có một bài kiểm tra cho từng thành phần, nhưng đó là điều bạn nên quan tâm sau này (nhưng đừng quên nó. 😄)

Cài đặt Livewire

Trước tiên, bạn cần cài đặt Laravel Livewire. Để làm như vậy, hãy chạy lệnh soạn thảo sau

composer require livewire/livewire

Tiếp theo, bạn cần tải tệp JavaScript Livewire và tệp CSS Livewire. Nếu không tải các tệp đó trên một trang, bạn không thể sử dụng Livewire. May mắn thay, Livewire làm cho điều này thực sự dễ dàng đối với chúng tôi. Tất cả những gì bạn cần làm là thêm hai lệnh Blade bên dưới vào các tệp Blade của bạn và đảm bảo rằng các lệnh này được tải trên mọi trang

Nơi tốt nhất để đặt chúng thường là trong tệp

php artisan make:livewire ComponentName

2 của bạn

<html>
   <head>
      ...
      @livewireStyles
   head>
   <body>
      ...
      @livewireScripts
   body>
html>

Tạo các thành phần Livewire

Bây giờ là lúc tạo thành phần Livewire đầu tiên của chúng tôi. Cách tốt nhất để tạo một thành phần Livewire là chạy lệnh artisan sau, tương tự như các lệnh artisan thông thường của Laravel

php artisan make:livewire ComponentName

Thao tác này sẽ tạo hai tệp, tệp có logic Livewire và bố cục Blade

Ứng dụng\Http\Livewire\ComponentName. php
tài nguyên/lượt xem/livewire/tên thành phần. lưỡi. php

Bạn cũng có thể tạo một thành phần Livewire trong một không gian tên

php artisan make:livewire Dashboard/ComponentName

Lệnh trên tạo hai tệp sau


 
namespace App\Http\Livewire;
 
use Livewire\Component;
 
class ComponentName extends Component
{
    public function render()
    {
        return view('livewire.component-name');
    }
}

<div>
    {{-- In work, do what you enjoy. --}}
div>

Chỉ với hai tệp này, bạn có thể tạo các thành phần Livewire tương tác tuyệt vời

Tạo thành phần tìm kiếm Livewire

Vậy Livewire có gì đặc biệt? . Điều này có nghĩa là bạn có thể có một biến, thay đổi nó trong PHP của bạn và giao diện người dùng tự động cập nhật các giá trị mới

Hãy tưởng tượng rằng bạn có một trang trong ứng dụng Laravel với các tab. Bạn có thể có một biến chứa tên của tab hiện tại. Trong tệp Blade giao diện người dùng của bạn, bạn có thể thực hiện điều kiện

php artisan make:livewire ComponentName

3 để hiển thị đánh dấu chính xác. Thay đổi biến chẳng hạn khi nhấp chuột, đánh dấu sẽ tự động thay đổi mà không cần tải lại trang. 🤯

Trang web Livewire có một ví dụ tuyệt vời trên trang chủ của họ cho thấy sức mạnh của Livewire, vì vậy hãy bắt đầu với điều đó

________số 8

<div>
   <input wire:model="search" type="text" placeholder="Search users..."/>
 
   <ul>
       @foreach($users as $user)
           <li>{{ $user->username }}li>
       @endforeach
   ul>
div>

Vì vậy, những gì chúng ta thấy ở đây? . Mọi biến (hoặc thuộc tính hoặc thuộc tính) mà bạn khai báo là

php artisan make:livewire ComponentName

5 trên lớp Livewire, đều có sẵn cho giao diện người dùng và nó cập nhật thời gian thực

Giao diện người dùng có phần tử

php artisan make:livewire ComponentName

6 nơi mọi người nhập truy vấn tìm kiếm của họ. Giá trị của phần tử đầu vào này được 'kết nối' với giá trị của thuộc tính công cộng

php artisan make:livewire ComponentName

7. Và biến

php artisan make:livewire ComponentName

8 được chuyển đến giao diện người dùng, phụ thuộc vào

php artisan make:livewire ComponentName

9. Vì vậy, nếu giá trị của

php artisan make:livewire ComponentName

9 thay đổi, giá trị của

php artisan make:livewire ComponentName

8 sẽ thay đổi và giao diện người dùng cũng cập nhật – mà không cần tải lại trang. Ma thuật, phải không?

Make sure your template file has one root element

Một điều tốt để biết là tệp mẫu Blade của bạn chỉ có thể chứa một phần tử gốc

php artisan make:livewire Dashboard/ComponentName

2 als. Điều này có nghĩa là tất cả mã của riêng bạn luôn nằm trong một

php artisan make:livewire Dashboard/ComponentName

2 duy nhất. Tôi đang nói điều đó ở đây, trước khi bạn thấy mình gỡ lỗi vấn đề này

Tái bút. bạn không bị hạn chế đối với phần tử

php artisan make:livewire Dashboard/ComponentName

2, nhưng div là phần tử phổ biến nhất. Miễn là nó chỉ có một phần tử gốc

Cách hiển thị thành phần Livewire

Bây giờ bạn đã có ý tưởng về một thành phần Livewire trông như thế nào, bạn có thể tự hỏi làm thế nào để hiển thị nó trên một trang. Có nhiều cách để hiển thị một thành phần, vì vậy bạn có thể chọn một trong các cách sau để đưa thành phần Livewire vào tệp Blade

<html>
   <head>
      ...
      @livewireStyles
   head>
   <body>
      ...
      @livewireScripts
   body>
html>

1

Bạn cũng có thể thêm dữ liệu vào từng thành phần Livewire

<html>
   <head>
      ...



 @livewireStyles
 head>
 <body>
 ...
 @livewireScripts
 body>
html>

2

<html>
   <head>
      ...
      @livewireStyles
   head>
   <body>
      ...
      @livewireScripts
   body>
html>

0

Bạn cũng có thể sử dụng Livewire làm thành phần toàn trang. Điều đó có nghĩa là điều này sẽ làm việc

<html>
   <head>
      ...
      @livewireStyles
   head>
   <body>
      ...
      @livewireScripts
   body>
html>

1

<html>
   <head>
      ...
      @livewireStyles
   head>
   <body>
      ...
      @livewireScripts
   body>
html>

2

Kiểm tra tài liệu Livewire để biết thêm thông tin nếu bạn quan tâm đến việc sử dụng các thành phần trang đầy đủ

Sử dụng hành động

Một điều rất tiện dụng khác là việc sử dụng các hành động Livewire. Các hành động Livewire có nghĩa là bạn có thể xác định chức năng công khai trên thành phần của mình và gọi hành động này từ giao diện người dùng. Ví dụ: nếu người dùng nhấp vào nút

Ví dụ này đến từ các tài liệu và tôi nghĩ rằng đó là một ví dụ tuyệt vời cho thấy sức mạnh của Livewire thực sự tốt

<html>
   <head>
      ...
      @livewireStyles
   head>
   <body>
      ...
      @livewireScripts
   body>
html>

3

<html>
   <head>
      ...
      @livewireStyles
   head>
   <body>
      ...
      @livewireScripts
   body>
html>

4

Tóm lại, Livewire hiện sẽ gọi hàm

php artisan make:livewire Dashboard/ComponentName

5 mỗi khi người dùng nhấp vào

php artisan make:livewire Dashboard/ComponentName

6. Bạn có thể thêm một chỉ thị

php artisan make:livewire Dashboard/ComponentName

7 vào mọi phần tử mà bạn muốn, do đó, nó không giới hạn ở các nút và

php artisan make:livewire Dashboard/ComponentName

8

Sử dụng biểu mẫu với Laravel Livewire

Tiếp theo, tôi muốn nói về các biểu mẫu trong Livewire. Cách Livewire xử lý các biểu mẫu có thể được phân loại là một trong những tính năng Livewire mạnh mẽ nhất. Tôi sẽ không ngạc nhiên nếu đó là một trong những tính năng được sử dụng phổ biến nhất

Hãy xem nó hoạt động như thế nào

Đầu tiên, chúng ta có tệp Blade. Giống như trong HTML không phải Livewire 'thông thường', mỗi biểu mẫu được gói trong một thẻ

php artisan make:livewire Dashboard/ComponentName

9. Sự khác biệt lớn là biểu mẫu Livewire không có các thẻ


 
namespace App\Http\Livewire;
 
use Livewire\Component;
 
class ComponentName extends Component
{
    public function render()
    {
        return view('livewire.component-name');
    }
}

0,


 
namespace App\Http\Livewire;
 
use Livewire\Component;
 
class ComponentName extends Component
{
    public function render()
    {
        return view('livewire.component-name');
    }
}

1 và


 
namespace App\Http\Livewire;
 



use Livewire\Component;
 
class ComponentName extends Component
{
 public function render()
 {
 return view('livewire.component-name');
 }
}

2

Vậy làm thế nào để chúng tôi nói với Livewire nơi gửi thông tin đến?

Chúng ta có thể làm như vậy với thuộc tính


 
namespace App\Http\Livewire;
 
use Livewire\Component;
 
class ComponentName extends Component
{
    public function render()
    {
        return view('livewire.component-name');
    }
}

3. Thêm thuộc tính này vào

php artisan make:livewire Dashboard/ComponentName

9 trông như thế này.


 
namespace App\Http\Livewire;
 
use Livewire\Component;
 
class ComponentName extends Component
{
    public function render()
    {
        return view('livewire.component-name');
    }
}

5. Nó nói với Livewire. 'khi biểu mẫu được gửi, hãy ngăn hành động gửi bình thường và thay vào đó hãy gọi hàm


 
namespace App\Http\Livewire;
 
use Livewire\Component;
 
class ComponentName extends Component
{
    public function render()
    {
        return view('livewire.component-name');
    }
}

6

Hãy xem điều này trong hành động. Chúng tôi bắt đầu bằng cách sửa đổi tệp Blade của mình để nó chứa một biểu mẫu rất đơn giản, chỉ yêu cầu một địa chỉ e-mail

<html>
   <head>
      ...
      @livewireStyles
   head>
   <body>
      ...
      @livewireScripts
   body>
html>

5

Tiếp theo, hãy thêm chức năng


 
namespace App\Http\Livewire;
 
use Livewire\Component;
 
class ComponentName extends Component
{
    public function render()
    {
        return view('livewire.component-name');
    }
}

6 vào thành phần Livewire

<html>
   <head>
      ...
      @livewireStyles
   head>
   <body>
      ...
      @livewireScripts
   body>
html>

6

Ngoài ra, hãy thêm một thuộc tính công khai có tên là


 
namespace App\Http\Livewire;
 
use Livewire\Component;
 
class ComponentName extends Component
{
    public function render()
    {
        return view('livewire.component-name');
    }
}

8 và đảm bảo đặt giá trị mặc định như một chuỗi rỗng,


 
namespace App\Http\Livewire;
 
use Livewire\Component;



 
class ComponentName extends Component
{
 public function render()
 {
 return view('livewire.component-name');
 }
}

9. Nếu trường này là tùy chọn, bạn cũng có thể đặt loại biến thành null bằng cách thêm ____60 trước loại và gán giá trị mặc định là ____61

<html>
   <head>
      ...
      @livewireStyles
   head>
   <body>
      ...
      @livewireScripts
   body>
html>

7

Thuộc tính này sẽ luôn chứa giá trị của trường đầu vào, bởi vì chúng tôi liên kết các giá trị này cùng với thuộc tính

<div>
    {{-- In work, do what you enjoy. --}}
div>

2 trên đầu vào

Bạn thấy rằng chúng tôi đang sử dụng phương pháp

<div>
    {{-- In work, do what you enjoy. --}}
div>

3. Đây phải luôn là phương thức đầu tiên trong hàm


 
namespace App\Http\Livewire;
 
use Livewire\Component;
 
class ComponentName extends Component
{
    public function render()
    {
        return view('livewire.component-name');
    }
}

6 của bạn, vì nó sẽ chạy tất cả các quy tắc xác thực. Nếu xác thực không thành công, nó sẽ dừng dòng mã

Vậy làm thế nào để chúng ta xác định các quy tắc đó?

Để làm như vậy, hãy thêm thuộc tính

<div>
    {{-- In work, do what you enjoy. --}}
div>

5 vào thành phần Livewire. (Xem sức mạnh của quy ước ưu tiên hơn cấu hình?)

<html>
   <head>
      ...
      @livewireStyles
   head>
   <body>
      ...
      @livewireScripts
   body>
html>

8

Bây giờ, chúng tôi gần như đã sẵn sàng để bắt đầu sử dụng thành phần Livewire đầu tiên của mình. Chúng tôi chỉ cần một nơi để hiển thị các thông báo lỗi tiềm ẩn

Bạn có thể sử dụng chỉ thị

<div>
    {{-- In work, do what you enjoy. --}}
div>

6 cho điều đó. Bây giờ tệp Blade của chúng ta sẽ trông như thế này

<html>
   <head>
      ...
      @livewireStyles
   head>
   <body>
      ...
      @livewireScripts
   body>
html>

9

Nếu bạn muốn tùy chỉnh thông báo lỗi hoặc tên thuộc tính, hãy xem tài liệu

Xác thực biểu mẫu thời gian thực & móc vòng đời Livewire

Một tính năng thú vị khác mà tôi muốn cho bạn thấy, đó là tính năng xác thực thời gian thực. Làm thế nào là có thể?

Livewire cho phép bạn thêm chức năng cụ thể vào thành phần, như

<div>
    {{-- In work, do what you enjoy. --}}
div>

7,

<div>
    {{-- In work, do what you enjoy. --}}
div>

8. Những chức năng đó được gọi là móc vòng đời. Bạn có thể thêm chúng cho từng biến và mỗi khi biến đó được cập nhật, chức năng này sẽ chạy

Vì vậy, nếu chúng tôi muốn xác thực đầu vào


 
namespace App\Http\Livewire;
 
use Livewire\Component;
 
class ComponentName extends Component
{
    public function render()
    {
        return view('livewire.component-name');
    }
}

8 mỗi khi đầu vào thay đổi – thời gian thực khi người dùng đang nhập – chúng tôi có thể sử dụng hook vòng đời cho điều đó

php artisan make:livewire ComponentName

0

Bạn cũng có thể sử dụng móc vòng đời chung hơn, chạy trên mọi bản cập nhật thuộc tính. Điều này đặc biệt hữu ích nếu bạn có các biểu mẫu dài và bạn không muốn tất cả mười hàm thực hiện lặp đi lặp lại cùng một xác thực

php artisan make:livewire ComponentName

1

Bước tiếp theo

Như bạn đã thấy, Livewire cho phép các nhà phát triển PHP triển khai khả năng tương tác khá tuyệt vời trong các ứng dụng Laravel của họ mà các nhà phát triển không cần phải viết một dòng JavaScript nào

Đối với các nhà phát triển như tôi, những người có nhiều cảm xúc với PHP hơn là với JavaScript, Livewire tiết kiệm rất nhiều thời gian

Bây giờ bạn đã biết kiến thức cơ bản về Livewire, tôi khuyên bạn nên bắt đầu sử dụng nó càng nhiều càng tốt để trải nghiệm toàn bộ sức mạnh của Livewire. Còn nhiều điều nữa mà tôi chưa kể ở đây, vì vậy hãy bắt đầu sử dụng nó, xem kỹ tài liệu sau và tận hưởng. ⚡️

Làm thế nào để tạo các thành phần laravel?

Chúng ta có thể tạo hai loại thành phần. Nhà sản xuất. component Lệnh Artisan được sử dụng để tạo các thành phần dựa trên lớp . Để tạo một thành phần ẩn danh, bạn có thể sử dụng cờ --view khi gọi make. lệnh thành phần.

Phương pháp gắn kết trong Livewire là gì?

Phương thức mount() . Đây là cách bạn sẽ vượt qua trong một mô hình liên hệ. @livewire('show-contact', ['contact' => $contact]) Nếu bạn đang sử dụng Laravel 7 trở lên, bạn có thể sử dụng .

Livewire hoạt động như thế nào?

Livewire hiển thị đầu ra thành phần ban đầu với trang (như phần bao gồm Blade) . Bằng cách này, nó thân thiện với SEO. Khi xảy ra tương tác, Livewire tạo một yêu cầu AJAX tới máy chủ với dữ liệu được cập nhật. Máy chủ kết xuất lại thành phần và phản hồi bằng HTML mới.

Laravel Livewire có đáng không?

Nếu bạn là người phụ trợ và cần tạo dự án nhanh chóng chỉ với một số thành phần động trên trang, thì Livewire có lẽ là giải pháp tốt nhất dành cho bạn . Nó không đưa bạn ra khỏi vùng thoải mái của Laravel. bạn có thể tiếp tục viết mã Laravel back-end, tạo các lớp PHP và tệp Blade.

programming

Làm cách nào để tạo một thành phần trong Livewire?

Thông tin cơ bản về Livewire

Cài đặt Livewire

Tạo các thành phần Livewire

Tạo thành phần tìm kiếm Livewire

Make sure your template file has one root element

Cách hiển thị thành phần Livewire

Sử dụng hành động

Sử dụng biểu mẫu với Laravel Livewire

Xác thực biểu mẫu thời gian thực & móc vòng đời Livewire

Bước tiếp theo

Làm thế nào để tạo các thành phần laravel?

Phương pháp gắn kết trong Livewire là gì?

Livewire hoạt động như thế nào?

Laravel Livewire có đáng không?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội