Développement Laravel : Comment implémenter les composants Blade à l'aide de Laravel Livewire ?

Laravel étant devenu un framework PHP populaire, son développement est devenu de plus en plus pratique. Dans l'écosystème du framework Laravel, il existe de nombreux excellents packages d'extension, dont Laravel Livewire. Ce package d'extension peut facilement implémenter une expérience interactive en temps réel et est très approprié pour une utilisation dans la vue Blade de Laravel.

Cet article expliquera comment utiliser Laravel Livewire pour implémenter les composants Blade, vous permettant de créer facilement des applications avec une dynamique en temps réel.

Qu'est-ce que Laravel Livewire ?

Laravel Livewire est un package d'extension PHP qui vous permet de créer des expériences interactives en temps réel sans utiliser JavaScript. Il utilise les structures syntaxiques de PHP (par exemple, les instructions if, les boucles for, les appels de fonction, etc.) pour construire la partie interactive de la vue Blade.

L'avantage d'utiliser Livewire est que vous n'avez pas besoin d'écrire beaucoup de code logique en JavaScript dans chaque fonction. Au lieu de cela, vous pouvez réutiliser les compétences existantes en PHP et mieux maintenir votre code. De plus, Livewire a une courbe d'apprentissage relativement faible et de nombreux développeurs Laravel peuvent le maîtriser en peu de temps.

Commencez à utiliser Laravel Livewire

Installez Livewire

Installer Laravel Livewire est très pratique, exécutez simplement la commande suivante :

composer require livewire/livewire

Créer un composant

Laravel Livewire nous permet de créer un composant sans état à restituer dans l'application. Grâce à Livewire, nous pouvons créer des composants et les restituer en utilisant la syntaxe Blade.

Nous pouvons utiliser la commande suivante pour créer un nouveau composant Livewire :

php artisan make:livewire HelloLivewire

Après avoir exécuté la commande ci-dessus, Laravel créera un nouveau composant nommé HelloLivewire pour nous. Il créera un fichier nommé HelloLivewire.php et un fichier nommé hello-livewire.blade.php dans le répertoire app/Http/Livewire > voir. HelloLivewire的新组件。它将在app/Http/Livewire目录中创建一个名为HelloLivewire.php的文件和一个名为hello-livewire.blade.php的视图。

实现交互

我们可以通过在组件类的render函数中编写Blade模板代码来指定组件的HTML结构。

在该模板中，我们可以使用wire:model指令来为组件属性创建一个双向绑定。这意味着，如果用户在表单中输入值，则该值将立即显示在由该组件渲染的HTML中。类似地，如果我们通过Laravel Livewire更新属性的值，则该值将立即反映在HTML中。

例如，让我们创建一个组件展示一个计数器，并在按下按钮时增加该计数器的值。

class Counter extends Component
{
    public $count = 0;

    public function increment()
    {
        $this->count++;
    }

    public function render()
    {
        return view('livewire.counter');
    }
}

<!-- counter.blade.php -->
<div>
    <h1>{{ $count }}</h1>
    <button wire:click="increment">Click me</button>
</div>

在上面的代码中，我们创建了一个名为Counter的组件。该组件包含一个$count属性，可以在render函数中使用{{ $count }}的方式来渲染Counter值。

当用户单击按钮时，wire:click指令会调用组件上的increment方法，该方法用于将$ count值递增。这个逻辑是在Laravel控制器内执行的，因此只需要更新PHP代码就能实现交互功能。

将组件渲染到Blade视图

在最终步骤中，我们需要将组件渲染到应用程序的Blade视图中。我们可以使用@livewire Blade指令来渲染Livewire组件。

例如，我们可以在welcome.blade.php视图中使用以下代码来渲染刚刚创建的Counter组件：

@extends('layouts.app')

@section('content')
    <div class="container mx-auto">
        <div class="my-10">
            @livewire('counter')
        </div>
    </div>
@endsection

@livewire

Réaliser une interaction

Nous pouvons spécifier la structure HTML du composant en écrivant le code du modèle Blade dans la fonction render de la classe du composant.

Dans ce modèle, nous pouvons utiliser la directive wire:model pour créer une liaison bidirectionnelle pour les propriétés des composants. Cela signifie que si l'utilisateur saisit une valeur dans le formulaire, cette valeur apparaîtra immédiatement dans le code HTML rendu par le composant. De même, si nous mettons à jour la valeur d'une propriété via Laravel Livewire, la valeur sera immédiatement reflétée dans le HTML. 🎜🎜Par exemple, créons un composant qui affiche un compteur et incrémente la valeur du compteur lorsqu'un bouton est enfoncé. 🎜rrreeerrreee🎜Dans le code ci-dessus, nous avons créé un composant appelé Counter. Ce composant contient une propriété $count, qui peut être utilisée dans la fonction render pour restituer la valeur du compteur à l'aide du {{ $count }} méthode. 🎜🎜Lorsque l'utilisateur clique sur le bouton, la directive wire:click appellera la méthode increment sur le composant, qui est utilisée pour ajouter le $ count code> valeur progressivement. Cette logique est exécutée dans le contrôleur Laravel, donc seul le code PHP doit être mis à jour pour implémenter la fonctionnalité interactive. 🎜🎜Rendu le composant dans la vue Blade🎜🎜Dans la dernière étape, nous devons restituer le composant dans la vue Blade de l'application. Nous pouvons utiliser la directive Blade <code>@livewire pour restituer les composants Livewire. 🎜🎜Par exemple, nous pouvons utiliser le code suivant dans la vue welcome.blade.php pour restituer le composant Counter que nous venons de créer : 🎜rrreee🎜@livewire La directive > rendra le composant de la même manière dans Vue.js et React, avec le JavaScript et le CSS requis automatiquement injectés. 🎜🎜Conclusion🎜🎜Laravel Livewire est un package d'extension très pratique qui facilite la mise en œuvre des composants Blade. Il facilite la mise en œuvre d'interactions complexes sans utiliser beaucoup de code JavaScript. Avec l'aide de Livewire, vous pouvez créer des applications plus rapidement et augmenter encore votre productivité en utilisant du code PHP pour créer du HTML et du CSS. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!