如果设置，AlpineJS 捕获子组件值

Question

我正在使用 AlpineJS and 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

您可以使用 x-modelable directive 可以公开任何 Alpine.js 属性作为 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>

如果设置，AlpineJS 捕获子组件值

AlpineJS catch child component value if set

alpine.js