hx-inherit

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

¥The default behavior for htmx is to “inherit” many attributes automatically: that is, an attribute such as hx-target may be placed on a parent element, and all child elements will inherit that target. Some people do not like this feature and instead prefer to explicitly specify inheritance for attributes.

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

¥To support this mode of development, htmx offers the htmx.config.disableInheritance setting, which can be set to true to prevent inheritance from being the default behavior for any of the htmx attributes.

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

¥The hx-inherit attribute allows you to control the inheritance of attributes manually.

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

¥htmx evaluates attribute inheritance as follows:

• 当 hx-inherit 设置在父节点上时

  ¥when hx-inherit is set on a parent node

  • inherit="*" 此元素的所有属性继承将被启用

    ¥inherit="*" all attribute inheritance for this element will be enabled

  • hx-inherit="hx-select hx-get hx-target" 仅对一个或多个指定属性启用继承

    ¥hx-inherit="hx-select hx-get hx-target" enable inheritance for only one or multiple specified attributes

以下是当 htmx.config.disableInheritance 设置为 false 时，div 共享一组锚标签的 hx-target 属性的示例：

¥Here is an example of a div that shares an hx-target attribute for a set of anchor tags when htmx.config.disableInheritance is set to false:

<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>

注释

¥Notes

• 阅读有关 属性继承 的更多信息

  ¥Read more about Attribute Inheritance