时间戳

首页 > 解决方案 > AlpineJS x 数据被覆盖

javascript - AlpineJS x 数据被覆盖

问题描述

我有以下 HTML 结构：

<div x-data="{selected: 0}">
    <div x-data="{ open: false }"
        @click="open = !open; selected !== 1 ? selected = 1 : selected = 0;"
    >
        test
    </div>
    <div x-data="{ open: false }"
        @click="open = !open; selected !== 2 ? selected = 2 : selected = 0;"
    >
        test
    </div>
</div>

问题是在我写入 div 子 x-data 后，第一个带有所选 x-data 的 x-data 不再存在。我认为说我覆盖它是正确的。所以问题是，我怎样才能防止这种情况发生？我希望能够保持打开状态并更新所选内容。谢谢你

标签： javascriptlaraveltailwind-cssalpine.js

解决方案

在 Alpine.js 中，您的数据被封装在组件内（意味着没有父组件会看到它），嵌套组件也不会看到父组件数据。

目前，此功能不在路线图上。在此处查看此 Github 讨论。

事件总线方法

一种方法是利用 Alpine.js$dispatch魔术属性并在其他地方使用事件侦听器x-on:或@别名。

<!-- Parent component -->
<div id="papa" x-data="{isTired: false}" x-on:cry.window="isTired = true">
  <span x-text="'Papa is tired: ' + isTired"></span>
  <!-- New child component scope -->
  <div id="baby" x-data="">
    <button @click="$dispatch('cry')">Make Baby Cry</button>
  </div>
</div>

CodePen 演示

这利用了本机浏览器事件冒泡和捕获。

状态管理存储方法

如果您熟悉 React 或 Vue.js 等框架，那么您可能熟悉 Redux 或 Vuex 等状态管理库。

Spruce是类似 Alpine.js 的精简版本，它的好处是允许您轻松地在组件之间共享数据。

您可以在他们的入门指南中看到组件之间的通信示例。

推荐阅读