Laravel嵌套Alpine.js组件数据共享问题及报错求助

错误原因分析 #

1. 子组件数据访问错误：input.blade.php的x-init中直接写inputValue无法访问组件内部数据，Alpine.js组件内访问自身属性必须使用this.前缀。
2. 重复注册组件与多init事件：每个Blade组件内嵌的<script>会在页面渲染时重复输出，导致多次绑定alpine:init事件，容易引发加载顺序或重复注册问题。

修正方案 #

方案1：修正数据访问+避免脚本重复输出 #

1. 调整input.blade.php

<div x-data="input">
    <!-- 用this.inputValue访问组件内部数据 -->
    <input x-init="console.log('log', this.inputValue)" />
</div>

<!-- 使用@once确保脚本仅输出一次 -->
@once
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('input', () => ({
            inputValue: 'something'
        }))
    })
</script>
@endonce

2. 调整login.blade.php

同样给父组件脚本添加@once：

<div x-data="login">
    <x-input></x-input>
</div>

@once
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('login', () => ({
            user: 'John'
        }))
    })
</script>
@endonce

方案2：统一管理Alpine组件定义（更推荐） #

把所有Alpine组件定义集中放到resources/js/alpine-components.js：

document.addEventListener('alpine:init', () => {
    Alpine.data('login', () => ({
        user: 'John'
    }));

    Alpine.data('input', () => ({
        inputValue: 'something'
    }));
});

在resources/js/app.js中引入该文件：

import './alpine-components.js';

编译前端资源（以Vite为例）：

npm run dev

之后Blade组件只需保留HTML部分，无需内嵌脚本：

login.blade.php

<div x-data="login">
    <x-input></x-input>
</div>

input.blade.php

<div x-data="input">
    <input x-init="console.log('log', this.inputValue)" />
</div>

关键说明 #

• Alpine.js组件内部，x-init、x-on等需要写表达式的场景必须用this.访问自身属性；x-bind、x-text等指令可自动绑定上下文，无需前缀。
• 避免Blade组件内嵌重复脚本，用@once或统一JS文件管理能减少加载冲突，更符合工程化规范。

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