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('Post saved successfully!')";
    } // [tl! highlight:end]
};

当 save() 操作完成时，JavaScript 表达式 alert('Post saved successfully!') 将在客户端执行。

替代方案：使用 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('Post saved successfully!')"); // [tl! highlight]
    }
};

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

访问 $wire ​

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

php
#[Js]
public function resetForm()
{
    return <<<'JS'
        $wire.title = ''
        $wire.content = ''
        alert('Form has been reset')
    JS;
}

何时使用 ​

在需要以下情况时使用 #[Js]：

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

JavaScript 操作 vs #[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;

    // Server-side method that returns JavaScript
    #[Js]
    public function showCount()
    {
        return "alert('Count is: {$this->count}')";
    }
};
blade
<div>
    <button wire:click="showCount">Show Count</button>
</div>

<script>
    // Pure client-side JavaScript action
    this.$js.incrementLocal = () => {
        console.log('No server request made')
    }
</script>

了解更多 ​

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