$data

$data 是一个魔术属性，用于访问当前的 Alpine 数据作用域（通常由 x-data 提供）。

大多数情况下，你可以直接在表达式中访问 Alpine 数据。例如 x-data="{ message: 'Hello Caleb!' }" 允许你使用 x-text="message" 这样的写法。

然而，有时候拥有一个包含所有作用域的实际对象，方便传递给其他函数会很有帮助：

<div x-data="{ greeting: 'Hello' }">
    <div x-data="{ name: 'Caleb' }">
        <button @click="sayHello($data)">Say Hello</button>
    </div>
</div>

<script>
    function sayHello({ greeting, name }) {
        alert(greeting + ' ' + name + '!')
    }
</script>

Say Hello

现在，当按钮被按下时，浏览器会弹出 Hello Caleb!，因为它接收到一个包含调用它的表达式（@click="..."）所有 Alpine 作用域的数据对象。

大多数应用并不需要这个魔术属性，但对于更深层次、更复杂的 Alpine 工具来说，它非常有用。