在Alpine.js中调用Livewire组件方法报错：找不到__v_raw公共方法

问题场景 #

在Laravel Livewire结合Alpine.js开发时，尝试在Alpine组件内获取当前标签页的Livewire组件实例并调用其方法，代码如下：

// Alpine数据对象内的代码
let componentId = this.$refs.tabContent.querySelector('[wire\:id]').getAttribute('wire:id');
this.activeTabComponent = Livewire.find(componentId);
this.activeTabComponent.call(action.method);

执行后抛出错误：Public method [__v_raw] not found on component: [component-name]

目标是为每个标签页配置操作按钮，点击后调用对应Livewire组件的指定方法，标签组件的声明示例：

<livewire:tab-component
        title="Datos personales"
        :data="[
            'licensedProfessional' => $licensedProfessional,    
        ]"
        :tabs="[
            [
                'view' => 'admin.licensed_professionals.personal.general', 
                'label' => 'Datos generales', 
                'actions' => [
                    ['label' => 'Guardar', 'action' => 'submit']
                ]
            ],
            [
                'label' => 'Datos autorizados', 
                'component' => [
                    'name' => '\App\Http\Livewire\LicensedProfessionals\PublicProfileForm',
                ],
                'actions' => [
                    ['label' => 'Copiar de datos generales', 'action' => 'copy'],
                    ['label' => 'Guardar', 'action' => 'submit']
                ]
            ],
            ['view' => 'admin.licensed_professionals.authorization', 'label' => 'Personas autorizadas'],
            ['view' => 'admin.licensed_professionals.business_data', 'label' => 'Empresa'],
            ['view' => 'admin.licensed_professionals.signature', 'label' => 'Firma']
        ]"
    >
</livewire:tab-component>

原因分析 #

Livewire.find()返回的是一个Proxy代理对象，用于封装Livewire组件的响应式逻辑。当你尝试通过保存的代理实例调用.call()方法时，Alpine的响应式系统或Livewire的代理机制会错误地将调用转发到内部的__v_raw方法（该方法并非组件的公开方法），从而触发异常。

可行解决方案 #

方案1：直接调用，不保存代理实例（最简单） #

不需要将Livewire实例保存到Alpine的变量中，直接链式调用call()方法，绕开代理对象的响应式冲突：

let componentId = this.$refs.tabContent.querySelector('[wire\:id]').getAttribute('wire:id');
Livewire.find(componentId).call(action.method);

方案2：使用Livewire事件机制（推荐，符合设计模式） #

通过事件触发的方式调用组件方法，解耦Alpine与Livewire的直接依赖，同时避免代理对象的问题：

1. 在目标Livewire组件中声明监听事件：

// 示例：在PublicProfileForm组件内
protected $listeners = ['submitForm', 'copyFromGeneral'];

public function submitForm()
{
    $this->submit(); // 调用原有的submit方法
}

public function copyFromGeneral()
{
    $this->copy(); // 调用原有的copy方法
}

2. 在Alpine中触发对应事件：

let componentId = this.$refs.tabContent.querySelector('[wire\:id]').getAttribute('wire:id');
// 根据action.method映射到对应的事件名，可按需调整命名规则
const eventMap = {
    'submit': 'submitForm',
    'copy': 'copyFromGeneral'
};
Livewire.emitTo(componentId, eventMap[action.method]);

方案3：获取原始组件实例（不推荐，依赖内部实现） #

如果必须保存实例后调用，可以通过Livewire代理对象的__w_raw属性获取原始组件实例（注意是双下划线__w_raw，而非报错中的__v_raw）：

let componentId = this.$refs.tabContent.querySelector('[wire\:id]').getAttribute('wire:id');
this.activeTabComponent = Livewire.find(componentId).__w_raw;
this.activeTabComponent.call(action.method);

⚠️ 注意：该方法依赖Livewire的内部属性，未来版本更新可能会失效，仅作为临时解决方案使用。

优化建议：避免DOM查询组件ID #

通过DOM查询wire:id容易出错（比如标签内有多个Livewire组件时），建议在渲染标签内的Livewire组件时，直接将组件ID传递到Alpine的上下文：
在tab-component的视图中渲染子组件时：

@foreach($tabs as $tab)
    @if(isset($tab['component']))
        @php
            $component = livewire($tab['component']['name'], $tab['component']['data'] ?? []);
        @endphp
        {!! $component !!}
        <!-- 将组件ID存储到Alpine可访问的元素属性中 -->
        <div x-data="{ targetComponentId: '{{ $component->getId() }}' }" class="hidden"></div>
    @endif
@endforeach

然后在Alpine中直接读取该ID：

this.activeComponentId = this.$refs.tabContent.querySelector('[x-data*="targetComponentId"]').targetComponentId;

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