如何在JavaScript中使用Livewire组件，获取公共属性并调用对应方法

1. 关于示例中的Livewire对象 #

Livewire 是框架加载完成后自动挂载到window全局对象上的内置实例，无需额外声明即可直接使用，Livewire 2.x 版本同时支持window.Livewire（首字母大写）和window.livewire（全小写）两种写法。

2. 你当前代码报错的原因 #

window.livewire.find()方法要求传入的参数是Livewire自动为组件根元素生成的wire:id属性值，你错误传入了不存在的wire:updateMode属性值（public属性不会自动映射为根元素的自定义属性），传入的参数为null导致方法找不到对应组件，因此抛出错误。

3. 解决方案 #

方案一：通过find方法手动获取组件实例（适合Alpine组件不在Livewire模板范围内的场景） #

修正你的代码如下：

function adminFacilitiesComponent() {
    return {
        getSubmitLabel: function (component) {
            const componentRoot = document.getElementById("facilities_admin_page_container");
            // 获取Livewire自动生成的组件唯一ID
            const wireId = componentRoot.getAttribute("wire:id");
            // 获取对应Livewire组件实例
            const livewireComponent = window.livewire.find(wireId);
            // 直接读取public属性
            const updateMode = livewireComponent.updateMode;
            console.log('updateMode值：', updateMode);

            // 调用Livewire组件方法写法
            // livewireComponent.call('你的组件方法名', 参数1, 参数2);
        }
    }
}

方案二：直接使用Alpine和Livewire集成的$wire对象（更简单，推荐） #

如果你的Alpine组件定义在Livewire组件模板的内部，可直接通过$wire访问Livewire实例，不需要查找DOM元素：

function adminFacilitiesComponent() {
    return {
        getSubmitLabel: function (component) {
            // 直接读取Livewire组件的public属性
            const updateMode = this.$wire.updateMode;
            console.log(updateMode);

            // 调用Livewire组件方法写法
            // this.$wire.你的组件方法名(参数1, 参数2);
        }
    }
}

补充操作说明 #

如果你需要在JS中触发Livewire全局事件，直接调用官方示例的写法即可：

// 触发全局事件
Livewire.emit('postAdded')
// 组件实例触发自身事件
livewireComponent.emit('事件名', 参数)

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