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 屬性顯式使用繼承。