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和好的解决了组件的差异。
在这里插入图片描述

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 酷酷鲨 设计师:CSDN官方博客 返回首页