如何在Blade视图的Javascript脚本中读取Livewire组件的公共变量值

你可以根据使用场景选择以下两种实现方式： #

方案1：Blade直接插值（静态取值，无需后续同步） #

Blade渲染阶段会直接把PHP公共变量的值输出到JS代码中，写法最简单，适合不需要跟随组件状态更新的场景：

<script>
    // 数字/布尔类型可直接输出，字符串类型需要额外包裹引号：var data = "{{ $data }}"
    var data = {{ $data }};
    console.log(data);
</script>

注意：该方式输出的值是页面首次渲染时的固定值，后续点击按钮触发$data更新为100时，JS变量不会自动同步。

方案2：Livewire JS API取值（支持动态同步状态） #

如果需要实时获取组件更新后的最新$data值，使用Livewire提供的官方JS API操作即可，你之前写法的问题在于没有调用get()方法读取属性：

基础主动取值 #

<script>
    // Livewire 2版本用livewire:load事件，Livewire 3版本替换为livewire:init
    document.addEventListener('livewire:load', function () {
        // 调用get方法传入属性名读取公共变量
        var data = @this.get('data');
        console.log(data);
    })
</script>

监听变量自动更新 #

如果需要$data每次变更都触发JS逻辑，可以追加状态监听：

<script>
    document.addEventListener('livewire:load', function () {
        // 初始取值
        let data = @this.get('data');
        console.log('初始值：', data);

        // 监听$data属性变化
        Livewire.on('data', newValue => {
            data = newValue;
            console.log('更新后的值：', data);
        })
    })
</script>

内容的提问来源于stack exchange，提问作者Joseph