Livewire 中文文档

主题

Js ​

#[Js] 属性指定返回要在客户端执行的 JavaScript 代码的方法，提供从服务器端操作触发客户端行为的方式。

基本用法 ​

将 #[Js] 属性应用到返回 JavaScript 表达式的方法上：

php
<?php // resources/views/components/post/⚡create.blade.php

use Livewire\Attributes\Js;
use Livewire\Component;
use App\Models\Post;

new class extends Component
{
    public $title = '';

    public function save()
    {
        Post::create(['title' => $this->title]);

        return $this->showSuccessMessage(); // [tl! highlight]
    }

    #[Js] // [tl! highlight:start]
    public function showSuccessMessage()
    {
        return "alert('帖子保存成功！')";
    } // [tl! highlight:end]
};

当 save() 操作完成时，JavaScript 表达式 alert('帖子保存成功！') 将在客户端执行。

替代方法：使用 js() 方法 ​

除了 #[Js] 属性外，您还可以使用 js() 方法处理一次性 JavaScript 表达式：

php
<?php // resources/views/components/post/⚡create.blade.php

use Livewire\Component;
use App\Models\Post;

new class extends Component
{
    public $title = '';

    public function save()
    {
        Post::create(['title' => $this->title]);

        $this->js("alert('帖子保存成功！')"); // [tl! highlight]
    }
};

对于简单表达式，js() 方法更简洁，而 #[Js] 方法更适合可重用或复杂的 JavaScript 逻辑。

访问 $wire ​

您可以在 JavaScript 表达式中访问组件的 $wire 对象：

php
#[Js]
public function resetForm()
{
    return <<<'JS'
        $wire.title = ''
        $wire.content = ''
        alert('表单已重置')
    JS;
}

何时使用 ​

在需要以下功能时使用 #[Js]：

  • 在服务器操作后显示客户端警告或通知
  • 触发 JavaScript 动画或过渡效果
  • 在不重新渲染的情况下更新客户端状态
  • 从多个位置执行可重用的 JavaScript 逻辑
  • 与第三方 JavaScript 库集成

JavaScript 操作与 #[Js] 方法的区别 ​

有一个重要的区别：

  • JavaScript 操作（$js.methodName）完全在客户端运行，不发起服务器请求
  • #[Js] 方法先在服务器上运行，然后在客户端执行返回的 JavaScript
php
<?php // resources/views/components/⚡example.blade.php

use Livewire\Attributes\Js;
use Livewire\Component;

new class extends Component
{
    public $count = 0;

    // 返回 JavaScript 的服务器端方法
    #[Js]
    public function showCount()
    {
        return "alert('计数是：{$this->count}')";
    }
};
blade
<div>
    <button wire:click="showCount">显示计数</button>
</div>

@script
<script>
    // 纯客户端 JavaScript 操作
    $js.incrementLocal = () => {
        console.log('未发起服务器请求')
    }
</script>
@endscript

了解更多 ​

有关 Livewire 中 JavaScript 集成的更多信息，请参阅：