Laravel Alpine.js组件中如何传递回调函数并返回$event？

你的代码报错的核心原因是：在PHP模板里直接尝试调用$onChange($event)，但$event是Alpine.js的前端事件对象，PHP在渲染页面时无法识别这个变量，导致PHP层面的错误。

下面是两种可行的修复方案：

方案一：传递完整事件对象给父组件 #

修改input.blade.php，把x-on:change设置为调用传入的onChange函数并传递$event：

@props(['onChange' => '() => {}'])

<input x-on:change="{{ $onChange }}($event)">

然后在register.blade.php中通过事件对象获取输入值：

<div>
    <x-input onChange="(event) => {console.log('value', event.target.value)}"></x-input>
<div/>

方案二：直接传递输入框的值给父组件 #

如果只需要输入值，也可以在组件内部直接提取值再传递，这样父组件的写法不用改：
修改input.blade.php：

@props(['onChange' => '() => {}'])

<input x-on:change="{{ $onChange }}($event.target.value)">

register.blade.php保持你原来的写法即可：

<div>
    <x-input onChange="(value) => {console.log('value', value)}"></x-input>
<div/>

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