嵌套组件

未匹配的标注
本文档最新版为 2.x,旧版本可能放弃维护,推荐阅读最新版!

嵌套组件

Livewire 支持嵌套组件。 组件嵌套可以是一种非常强大的技术,但是有一些陷阱需要注意:

  1. 嵌套组件可以接受其父级的数据参数,但是它们不像Vue组件的props那样灵活。
  2. 请勿使用 Livewire 组件将 Blade 片段提取到单独的文件中。 对于这些情况,最好使用 Blade 包含或组件。

这是从另一个Livewire组件的视图中称为 add-user-note 的嵌套组件的示例。

UserDashboard.php

use Livewire\Component;

class UserDashboard extends Component
{
    public $user;

    public function mount(User $user)
    {
        $this->user = $user;
    }

    public function render()
    {
        return view('livewire.user-dashboard');
    }
}

user-dashboard.blade.php

<div>
    <h2>User Details:</h2>
    Name: {{ $user->name }}
    Email: {{ $user->email }}

    <h2>User Notes:</h2>
    <div>
        @livewire('add-user-note', ['user' => $user])
    </div>
</div>

循环跟踪组件

与VueJ相似,如果在循环中渲染组件,Livewire 无法跟踪哪个组件。 为了解决这个问题,livewire 提供了一种特殊的“键”语法:

show-users.blade.php

<div>
    @foreach ($users as $user)
        @livewire('user-profile', ['user' => $user], key($user->id))
    @endforeach
</div>

如果您使用的是Laravel 7或更高版本,则可以使用标记语法。

show-users.blade.php

<div>
    @foreach ($users as $user)
        <livewire:user-profile :user="$user" :key="$user->id">
    @endforeach
</div>

本文章首发在 LearnKu.com 网站上。

上一篇 下一篇
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 0
发起讨论 只看当前版本


暂无话题~