livewire 组件的使用

组件的使用在日常的前端框架开发中很普遍了，vue，react 用起来很爽。这边介绍用 laravel+livewire开发组件。

比如上图中的小卡片，可能会在多个几面中使用，这时咱们可以使用同一个组件。

实现的方式有两种：

第一种

 <livewire:app.app-card :application="$application" >

这种方式需要在 Livewire的类中，mount 接收 $application 的值，如下：

class AppCard extends Component
{

    public $application;

    public function mount($application){
        $this->application = $application;
    }
    public function render()
    {
        return view('livewire.app.app-card');
    }
}

view层可调用$application的数据。

注意：mount 方法传参需要和模版 :application 名字一样，而且不要有下划线获取其他符号。

第二种（amazing！）

这种方式就是比较麻烦一点，但是用起来非常不错， Jetstream 就是这么干的。

php artisan make:Provider LivewireComponentRegisterProvider

创建一个Provider 用来注册组件到blade

    public function boot()
    {
        Blade::component('livewire.app.app-card', 'app-card');
    }

这边说一个小技巧，<livewire:app.app-card > 写到后面感觉名字很长是不是，可以注册到livewire，可以重命名你喜欢短小精悍的名字

    public function register()
    {
        Livewire::component('appcard', AppCard::class);
    }

你就可以在页面中这样写：

 <livewire:appcard :application="$application" >

所以我们在页面中体现第二种方式是这样的：

              <x-app-card :application="$application">
                <x-slot name="button">
                    <button>选择应用</button>
                </x-slot>
              </x-app-card>

这样就不需要在卡片类中mount接受参数了，直接传到了子组件中

如果卡片中有不一样的地方可以用laravel 的 插槽去处理差异。比如：发现我上面截图中第一个页面有按钮，第二个页面中没有使用按钮，slot和好的解决了组件的差异。

往期文章：
Laravel livewire 学习资源集合
livewire 验证

和我做朋友？

本作品采用《CC 协议》，转载必须注明作者和本文链接