AlpineJS 捕获子组件值（如果设置）

Question

我正在使用AlpineJS和x-model，它在以下情况下效果很好：

<script src="https://unpkg.com/alpinejs@3.9.5/dist/cdn.min.js"></script>
<form x-data="{ value: '' }">
  <input x-model="value" placeholder="Type and see..." />
  <br>Value: <span x-text="value"></span>
</form>

但是，当我嵌套具有相同属性名称的组件时，该值不会传播到父组件，而是保留在子组件中：

<script src="https://unpkg.com/alpinejs@3.9.5/dist/cdn.min.js"></script>
<form x-data="{ value: '' }">
  <div x-data="{ value: '' }">
    <input x-model="value" placeholder="Type and see..."/>
    <br>Child value: <span x-text="value"></span>
  </div>
  Parent value: <span x-text="value"></span>
</form>

我知道这是一个非常具体的案例。人们可以说：“让一切成为一个组成部分”。但我不能这样做，因为嵌套组件将是我需要重用的低级通用组件。我需要父级能够访问附加到模型的相同值。

知道如何在不使用$store 的情况下解决这个问题吗？

Answer 1

您可以使用可以公开任何 Alpine.js 属性作为指令目标的x-modelable指令x-model。子组件的属性名称必须是唯一的。子组件中的属性名称x-model应该是后端模板系统宏函数的参数。

<script src="https://unpkg.com/alpinejs@3.9.5/dist/cdn.min.js"></script>
<form x-data="{ value: '' }">
  <div x-data="{ innerValue: '' }" x-modelable="innerValue" x-model="value">
    <input x-model="innerValue" placeholder="Type and see..." />
    <br>Child value: <span x-text="innerValue"></span>
  </div>
  Parent value: <span x-text="value"></span>
</form>