今天的内容是页面前後端资料传递，这个部分跟前面相比来说简单许多也比较直觉话。如果以前有写过 Vue.js 的朋友应该会对这个方式非常熟悉，但又稍微的一点点不一样，那就来看看今天的内容吧！

今天一样用官方文件的范例来做介绍，不过官方文件在变数的命名会跟保留字有点像，这边我会稍作改变避免误解。

基础介绍

假设我们要在页面上印出「Hello World!」这几个字，那我们先宣告一个变数叫做 $title 并给他预设的值 Hello World!，到这边後端的部分就完成啦！

class Day5 extends Component
{
    public $title = 'Hello World!';
    ...

前端的画面就直接使用 {{ $title }}来印出刚刚後端 $title 的内容，跟以往在 Controller 上把资料渲染到前端一样。同样的也和 Vue 把变数印出来的方式也一模一样。

<div>
    <h2>{{ $title }}</h2>
    <!-- Will output "Hello World!" -->
</div>

根据官方文件请注意以下三点：

1. 变数命名要避开 Livewire 的保留字：$rules、$messages
2. 变数在前端透过 JavaScript 都看得到，因此避免放入密码、个资等敏感资料。
3. 变数型态只能是 JS 支援的型态：（string、int、array、boolean）或是以下 PHP 的型态：Stringable、Collection、DateTime、Model、EloquentCollection。

注意：宣告时的protected、private属性不会被 Livewire 更新，所以避免使用它们来储存会被更新的资料。

Mount()

可以透过 mount() 来初始化内容，像是上面的「Hello World!」不一定要宣告变数时就给他值，也可以到 mount() 时再给值就可以了。差别是在某些功能下可能要先拿取其他资料做完判断再决定要给的值，像是：先拉取 User 的资料表判断这个人的身份，如果是管理员就显示「至高无上的管理员，欢迎回来」，如果是一般使用者就显示「你好，使用者」。因为没办法在宣告变数时就做这些复杂操作，所以这时候就要写在 mount() 啦！！

class Day5 extends Component
{
    public $title;
    public $subtitle;
    public $user = array(
        'role' => '管理员'
    );
 
    public function mount()
    {
        if ($this->user['role'] === '管理员')
        {
            $this->subtitle = '至高无上的管理员，欢迎回来';
        } else {
            $this->subtitle = '你好，使用者';
        }
    }
}

注意：Livewire 的运作不是一定要有 mount() 才能运作，使不使用取决於功能有没有需要用到。

$this->fill()

假设你有大量的资料要塞，一个一个打很麻烦，这时候就可以用 $this->fill() 以 PHP 阵列的方式一次来塞大量的值：

注意：阵列内要填入的变数是 'title' 而不是 $title

public function mount()
{
    $this->fill([
        'title' => '你好，世界',
        'subtitle' => '今天天气真好',
    ]);
}

$this->reset()

如果有值想要回到预设的状态，那就可以使用 $this->reset() ，也可以用阵列的方式一次对很多个变数使用：

注意：这边是回到宣告变数时的值，并不是回到 mount() 後的值。

    $this->reset('title');

    // 或是一次 reset 多个变数

    $this->reset([
        'title',
        'subtitle'
    ]);

范例

从 Day5 开始就会提供该篇文章的范例，自己做做看的话更能快速掌握技巧。

GitHub 网址在这边

运行之後打开 http://127.0.0.1:8000/day5 就能看到今天的范例啦

档案的话分别在：
app\Http\Livewire\Example\Day5.php
resources\views\livewire\example\day5.balde.php