Vue中控制组件的挂载位置

在 Vue 中，append-to-body=“true” 主要用于一些第三方组件（如 Element UI 或 Ant Design Vue 中的弹出框、下拉菜单等）来控制组件的挂载位置。具体来说，当你设置 append-to-body=“true” 时，它会将该组件的 DOM 元素插入到 body 元素中，而不是默认的父元素中。

为什么需要 append-to-body？

通常，Vue 组件会在父组件的 DOM 树中渲染，如果弹出框、下拉菜单等元素的父容器有 overflow: hidden 或 z-index 层级问题，这些元素可能会被裁切或被其他元素覆盖。使用 append-to-body=“true” 可以将这些元素移出当前父组件的 DOM 层级，使它们能够正常显示，避免被父容器的 CSS 样式影响。

举个例子：

<el-dropdown append-to-body="true"><el-button>点击下拉</el-button><el-dropdown-menu><el-dropdown-item>选项 1</el-dropdown-item><el-dropdown-item>选项 2</el-dropdown-item></el-dropdown-menu>
</el-dropdown>

在这个例子中， 组件中的下拉菜单会被直接挂载到 body 元素中，而不是它的父元素（可能是某个容器 div）。这样做的好处是，确保下拉菜单在视觉上不受父元素 CSS 样式（如 overflow）的影响，并且通常能避免被其他元素遮挡。

总结：

作用：将指定组件的 DOM 直接插入到 body 元素中。
场景：通常用于弹出框、下拉菜单等浮动的 UI 元素，确保它们不会被父元素的样式影响，能够正常显示。