wire:replace

Livewire 的 DOM 差异比较对于更新页面上的现有元素很有用，但有时你可能需要强制某些元素从头开始渲染以重置内部状态。

在这些情况下，你可以使用 wire:replace 指令来指示 Livewire 跳过对元素子元素的 DOM 差异比较，而是用服务器返回的新元素完全替换内容。

这在与第三方 JavaScript 库和自定义 Web 组件一起工作时最为有用，或者当元素重用可能在保持状态时导致问题时。

以下是一个将带有 shadow DOM 的 Web 组件包装在 wire:replace 中的示例，这样 Livewire 就会完全替换元素，允许自定义元素处理其自己的生命周期：

<form>
    <!-- ... -->

    <div wire:replace>
        <!-- This custom element would have its own internal state -->
        <json-viewer>@json($someProperty)</json-viewer>
    </div>

    <!-- ... -->
</form>

你还可以使用 wire:replace.self 指示 Livewire 替换目标元素本身以及所有子元素。

<div x-data="{open: false}" wire:replace.self>
  <!-- Ensure that the "open" state is reset to false on each render -->
</div>

参考

wire:replace

修饰符

修饰符	描述
.self	替换元素本身和所有子元素，而不仅仅是子元素