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>

如果您需要在该 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 属性明确使用继承。