hx-inherit
htmx 的默认行为是自动“继承”许多属性:也就是说,像 hx-target 这样的属性可以放在父元素上,所有子元素都会继承该目标。有些人不喜欢这个功能,而是更喜欢显式地指定属性的继承。
为了支持这种开发模式,htmx 提供了 htmx.config.disableInheritance
设置,可以将其设置为 false
以防止继承成为任何 htmx 属性的默认行为。
hx-inherit
属性允许您手动控制属性的继承。
htmx 如下评估属性继承
hx-inherit
设置在父节点上时inherit="*"
将为该元素启用所有属性继承hx-inherit="hx-select hx-get hx-target"
仅为一个或多个指定属性启用继承以下是一个 div 的示例,当 htmx.config.disableInheritance
设置为 false 时,它会为一组锚标签共享一个 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>