如何在AlpineJS中从父组件访问子组件的数据？

AlpineJS的x-data是支持嵌套的，咱们可以在子组件里轻松访问父组件的数据，但反过来——从父组件里获取子组件的数据，行不行呢？

我先给你看一个有点刻意但能说明问题的示例：

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.8/dist/cdn.min.js"></script>

<div x-data="{ get nAvailable() { return $el.querySelectorAll('.product.avail').length },
               get nSoldOut()   { return $el.querySelectorAll('.product:not(.avail)').length },
             }">

  <div x-data="{ avail: true }"  class="product" x-bind:class="avail && 'avail'">Product 1</div>
  <div x-data="{ avail: true }"  class="product" x-bind:class="avail && 'avail'">Product 2</div>
  <div x-data="{ avail: true }"  class="product" x-bind:class="avail && 'avail'">Product 3</div>
  <div x-data="{ avail: true }"  class="product" x-bind:class="avail && 'avail'">Product 4</div>
  <div x-data="{ avail: false }" class="product" x-bind:class="avail && 'avail'">Product 5 <span x-text="avail || '(sold out)'"></span></div>

  <br/>
  <div>Available: <span x-text="nAvailable"></span></div>
  <div>Sold out: <span x-text="nSoldOut"></span></div>
</div>

这个写法确实能正常运行，但它有个明显的问题：子组件的状态（avail）被转换成了.avail这个CSS类，父组件只能通过扫描DOM元素来统计可用和售罄的商品数量。如果页面里的商品数量很多，这种DOM查询的方式就会变得很慢，性能不太友好。

那有没有办法不用这种依赖DOM类的方式，直接从父组件获取子组件的状态数据呢？

备注：内容来源于stack exchange，提问作者lonix