hx-inherit

htmx 的默认行为是自动“继承”许多属性：也就是说，诸如 hx-target 之类的属性可以放在父元素上，所有子元素都会继承该目标。有些人不喜欢这个功能，而是更喜欢明确指定属性的继承。

为了支持这种开发模式，htmx 提供了 htmx.config.disableInheritance 设置，可以设置为 true 防止继承成为任何 htmx 属性的默认行为。

该 hx-inherit 属性允许你手动控制属性的继承。

htmx 按如下方式评估属性继承：

  • 当 hx-inherit 在父节点上设置时
  • inherit="*"：该元素的所有属性继承都将启用
  • hx-inherit="hx-select hx-get hx-target"：仅为一个或多个指定属性启用继承

下面是一个 div 的示例，当 htmx.config.disableInheritance 设置为 false 时，<a> 标签组​​会共享 hx-target 的属性：

<div hx-target="#tab-container" hx-inherit="hx-target">
  <a hx-boost="true" href="/tab1">Tab 1</a>
  <a hx-boost="true" href="/tab2">Tab 2</a>
  <a hx-boost="true" href="/tab3">Tab 3</a>
</div>

笔记