能否在拥有独立x-data的子组件中更新父组件的x-data？

核心问题：独立的Alpine作用域 #

你写的两个<div>属于完全独立的Alpine.js作用域，第二个作用域里的调用无法访问第一个作用域定义的方法和状态，自然没法更新第一个作用域的id值。同时代码还存在几处语法/逻辑错误，一起修正：

错误1：x-data语法缺失 #

第二个div的x-data少了等号，正确写法：

<div x-data="{data1: '1', data2: '2'}">

错误2：函数名大小写不匹配 #

第一个作用域的函数是helperFunction（驼峰写法），但调用时写的是helperfunction（全小写），JavaScript对大小写敏感，必须严格一致。

错误3：@change事件参数未正确传递 #

@change="helperfunction(val)"里的val未定义，需用$event.target.value获取输入框的实际值。

解决思路：共享状态或合并作用域 #

要让两部分联动，有两种常用方案：

方案1：合并到同一个作用域 #

如果两个DOM元素可以放在同一父容器下，直接将它们归入同一个x-data作用域：

<div x-data="dataManager()">
    <some-other-component />
    <div x-text="id"></div>

    <!-- 输入框移入同一作用域 -->
    <div>
        <input @change="helperFunction($event.target.value)">
    </div>
</div>
<script>
    dataManager() {
        return {
            id: null,
            someOtherId: null,
            helperFunction(val){ this.id = val }
        }
    }
</script>

方案2：使用Alpine全局存储（适用于无法合并作用域的场景） #

如果两个元素必须分开，可借助Alpine的store实现跨作用域状态共享（Alpine 3.x支持）：

<!-- 先定义全局共享store -->
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.store('dataManager', {
            id: null,
            someOtherId: null,
            helperFunction(val){ this.id = val }
        })
    })
</script>

<!-- 第一个组件，引用全局store -->
<div x-data>
    <some-other-component />
    <div x-text="$store.dataManager.id"></div>
</div>

<!-- 第二个组件，调用全局store的方法 -->
<div x-data="{data1: '1', data2: '2'}">
    <input @change="$store.dataManager.helperFunction($event.target.value)">
</div>

修改后，输入框的内容变化就能正确更新id值并同步显示了。

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