HTMX - 属性继承

在大多数情况下，HTMX 属性都是继承的，如果您在父元素上应用任何属性，那么在大多数情况下(在感觉需要的情况下)，子元素将自动继承该属性的行为。

该属性继承允许您将属性提升到 DOM，以便避免代码重复。正如您在下面的代码示例中所看到的：

使用属性继承避免代码重复

在这里，我们将有两个元素，并且一个属性会通用，即 hx-confirm 向用户显示确认对话框。

<button hx-delete="/account" hx-confirm="Are you sure?">
 Delete My Account
</button>
<button hx-put="/account" hx-confirm="Are you sure?">
 Update My Account
</button>

因此，我们可以将这两个元素包装在父元素内，并在父元素上使用 hx-confirm 属性。

<div hx-confirm="Are you sure?">
    <button hx-delete="/account">
 Delete My Account
    </button>
    <button hx-put="/account">
 Update My Account
    </button>
</div>

如果您需要在那其中添加一个或多个子元素，而您不希望该子元素继承父元素的行为。那么您只需在 hx-confirm 属性上添加 unset 值即可。

<div hx-confirm="Are you sure?">
    <button hx-delete="/account">
 Delete My Account
    </button>
    <button hx-put="/account">
 Update My Account
    </button>
    <button hx-confirm="unset" hx-get="/">
 Cancel
    </button>
</div>

禁用属性继承

可以使用 hx-disinherit 属性在元素和属性基础上分别禁用属性继承。

要完全禁用属性继承，您需要将 htmx.config.disableInheritance 配置变量设置为 true。这将禁用继承，并让您通过使用 hx-inherit 属性显式使用继承。