x-id

x-id 允许你为使用 $id() 生成的任何新 ID 声明一个新的"作用域"。它接受一个字符串数组（ID 名称），并为在其内部生成的每个 $id('...') 添加一个后缀，该后缀在页面上的其他 ID 中是唯一的。

x-id 旨在与 $id(...) 魔术方法一起使用。

访问 $id 文档 以更好地理解此功能。

以下是指令使用的简要示例：

<div x-id="['text-input']">
    <label :for="$id('text-input')">Username</label>
    <!-- for="text-input-1" -->

    <input type="text" :id="$id('text-input')">
    <!-- id="text-input-1" -->
</div>

<div x-id="['text-input']">
    <label :for="$id('text-input')">Username</label>
    <!-- for="text-input-2" -->

    <input type="text" :id="$id('text-input')">
    <!-- id="text-input-2" -->
</div>

尽管上面这段代码中没有包含，但 x-id 不能在没有父元素定义 x-data 的情况下使用。→ 阅读更多关于 x-data