Laravel-Livewire笔记系列(二)-Livewire快速使用体验

作者: 温新

分类: 【Laravel】

阅读: 2449

时间: 2021-10-15 03:52:13

作者:温新

时间:2021-08-13

hi,我是温新,一名PHPer

1)本系列笔记使用Laravel8.x作为演示;

2)使用Livewire2.x版本

安装完成后有没有迫不及待的要体验下?全栈开发利器到底是不是吹的,一试便知。

这个扩展包确实让人用了就不想回去了,爱了。

路由控制器视图

1)创建路由

Route::get('live', 'DemoController@live');

2)控制器

php artisan make:controller DemoController

// DemoController.php
public function live()
{
    return view('live');
}

3)视图

// live.blade.php
@extends('layouts.app')

@section('content')
    <div class="container">
    </div>
@endsection

Livewire快速使用体验

快速体验

第一步:生成组件

php artisan livewire:make StudyList

// 执行后出现一个选择
// 我这里选择no,不需要辅助数据
 Would you like to show some love by starring the repo? (yes/no) [no]:
 > no

1)该命令执行完成后会在app\Http\Livewire目录下生成相关组件控制器;

2)会在resources/views/livewire目录下生成相关的组件模板文件。

第二步:视图使用两种方法使用livewire组件

使用方法:<livewire:组件模板名 />

// live.blade.php
@extends('layouts.app')

@section('content')
    <div class="container">
        <!-- 方式一:推荐使用-->
        <livewire:study-list/>
        <!--方式二-->
        @livewire('study-list')
    </div>
@endsection

第三步:修改livewire组件的内容

// livewire/study-list.blade.php
<div>
    <p>我是livewire组件</p>
</div>

第四步:访问路由

live路由访问,就可以看到输出了两次study-list组件的内容2次。

携带参数

经过了快速体验后,现在在此基础上做一些简单的改动——携带参数。

第一步:修改视图文件

// live.blade.php
@extends('layouts.app')

@section('content')
    <div class="container">
        @php
            $webUrl = 'https://www.ziruchu.com';
        @endphp
        <livewire:study-list webName="自如初" :webUrl="$webUrl"/>
    </div>
@endsection

绑定一个静态参数与动态参数。需要注意的是,绑定静态参数不需要:()冒号,动态参数需要。

第二步:修改组件控制器

// Livewire/StudyList.php
<?php

namespace App\Http\Livewire;

use Livewire\Component;

class StudyList extends Component
{
    // 接收参数
    public $webName = '';
    public $webUrl  = '';

    // 初始化方法(当做构造函数理解)
    public function mount(string $webName, string $webUrl)
    {
        // 这样赋值后就可以直接在模板组件中使用
        $this->webName = $webName;
        $this->webUrl  = $webUrl;
    }

    // 组件模板渲染
    public function render()
    {
        return view('livewire.study-list');
    }
}

注意:接收绑定的参数值后,不需要在render方法中进行传递。

第三步:组件模板中直接使用

// livewire/study-list.blade.php
<div>
    <p>我是livewire组件</p>
    <p>{{ $webName }}</p>
    <p>{{ $webUrl }}</p>
</div>

第四步:路由访问

输入你的路由访问。

请登录后再评论