Alpine.js：如何在子组件JS脚本中修改父组件变量

可以在Alpine.js的子组件JS脚本中修改父组件的变量，以下是几种实用的实现方式：

方法1：通过自定义事件（推荐，低耦合） #

利用Alpine的$dispatch方法触发自定义事件，父组件监听该事件并修改自身变量，这种方式能保持组件间的独立性。

修改后的完整代码：

<div x-data="parent">
    <!-- 父组件监听自定义事件 -->
    <div x-data="child" @set-open="open = true"></div>
</div>

<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('parent', () => ({
        open: false,
        toggle() {
            this.open = !this.open
        }
    }))

    Alpine.data('child', () => ({
        init() {
            // 子组件触发自定义事件，通知父组件修改变量
            this.$dispatch('set-open')
        }
    }))
})
</script>

如果需要传递动态值，可以在$dispatch中携带数据：

// 子组件
this.$dispatch('set-open', { value: true })

// 父组件监听时接收数据
@set-open="open = $event.detail.value"

方法2：直接访问父组件实例（简单，高耦合） #

通过Alpine提供的$parent属性直接访问父组件的实例，从而修改其变量。这种方式适合简单的父子组件场景，但会增加组件间的耦合度。

代码示例：

<div x-data="parent">
    <div x-data="child"></div>
</div>

<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('parent', () => ({
        open: false,
        toggle() {
            this.open = !this.open
        }
    }))

    Alpine.data('child', () => ({
        init() {
            // 直接修改父组件的open变量
            this.$parent.open = true
        }
    }))
})
</script>

方法3：双向绑定传递属性 #

将父组件的变量通过属性传递给子组件，子组件通过触发事件回传修改后的值，实现类似双向绑定的效果：

<div x-data="parent">
    <!-- 传递父组件变量，并监听更新事件 -->
    <div x-data="child" :parent-open="open" @update:open="open = $event.detail"></div>
</div>

<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('parent', () => ({
        open: false,
        toggle() {
            this.open = !this.open
        }
    }))

    Alpine.data('child', (props) => ({
        init() {
            // 修改后通知父组件更新
            this.$dispatch('update:open', true)
        }
    }))
})
</script>

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