使用 Livewire 之後，在 Layout 上会改用 component 的 $slot 方式来绑定 Livewire 渲染的画面。这项改动会导致原本 Controller Blade 在 @extends('layouts.app') 时会报错 ErrorException Undefined variable: slot。
为了不用把一样的 Layout 拆成两个各自维护，以下整理了几个不同的方法与思考方向。
这个方法是把 Livewire 改成透过 extends 去产生画面，因此如果是原有专案则可以不用改变 Layout 的设置，新的专案的话则必须把 {{ $slot }}替换成 @yield()。之後在每个 Livewire 在 render() 额外加一行 ->extends() 去指定要使用哪个 Layout，这样就完成了。
而在 Controller Blade 方面，则可以不用做任何改动就可以完成兼容。
# Layout
<head>
@livewireStyles
</head>
<body>
@yield('content')
@livewireScripts
</body>
# Livewire
public function render()
{
return view('livewire.show-posts')
->extends('layouts.app');
}
如果有多个 @yield 可以透过 ->section() 来指定是哪一个：
public function render()
{
return view('livewire.show-posts')
->extends('layouts.app')
->section('main');
}
这个方法比较适合用在旧的专案上，只是在大量使用 Livewire 的时候会觉得很烦要一直加用 extends。其余部分是都还 ok，也不会影响到原本的专案。
优点：
缺点：
->extends()
由於 $slot 是 Laravel Component 中的使用方法，当元件中没有被指定的内容都会被丢到 $slot 中，像是：
# component - 'demo'
<div>
<p>Show Slot:</p>
{{ $slot }}
</div>
# blade
<x-demo>
<p>CLICK the button NOW !</p>
<button>Click Me</button>
</x-demo>
# 实际渲染
<div>
<p>Show Slot:</p>
<p>CLICK the button NOW !</p>
<button>Click Me</button>
</div>
因此可以透过这个方式把原本的 Layout 给它弄成 Component 的方式，就可以同时兼容 Livewire 与原本的 blade。
php artisan make:component Layout
由於 Livewire 默认是使用 layouts.app，因此只要替换在 Component 中的 render() 原本所指定的 view 就好。
public function render()
{
return view('components.layout');
}
替换成在 views/layouts 下的档案
public function render()
{
return view('layouts.app');
}
<x-layout>之後在原本的 Blade 页面所使用的 @extends('layouts.app') 就可以不用加了，之後都改用 <x-layout> 就可以将该页面的东西放入 Layout 中啦！
<x-layout>
...
</x-layout>
比较适合新建的全 Livewire 专案，哪天突然有需要用到从 Controller 直接产生画面的需求，就可以在不影响 Livewire 运行的情况下完美兼容。
优点：
缺点：
主要也是要看专案哪方面用比较多来选择兼容的方法，如果是原本的专案要追加 Livewire 的话，用第一种方法就能在不修改其他部分就能够兼容，还可以不用重构。
而新的专案如果是使用 Livewire 的话基本上是不会使用到 Controller 啦。但是万一有遇到要使用的场景再补上方法二的方式就可以了，不过用过了 Livewire 谁还回得去呢 XDD！
<<: Day20 Anonymous page 与 RMAP
>>: EP23 - 持续部署使用 Octopus Deploy 三部曲，新增 Octopus 专案及调整 Jenkins 环境
接下来几天的文章会像料理节目一样，用我事先准备好的材料 (模型、App...) 来进行说明，底下就来...
在C语言里，字串就是字元的一维阵列，且这个字元阵列有一结尾符号「\0」我们称之为空字元，则这个字串称...
天亮了 昨晚2号玩家死亡 关於迷雾森林故事 颤栗消逝 洛神：昨晚2号玩家被杀死了，邪恶阵营获胜，可以...
好的，讲解完 Requests 套件的基本介绍後，终於要进入真实情况的爬虫应用拉！ 但我们一步一步来...
回圈指的是「重复做某件事，次数随着数值『递增」或『递减』，当数值满足所设的条件，则退出回圈」。 所...