Vue如何将渲染好的组件移动位置

在实际开发中，有时可能需要将渲染好的组件移动到另外一个位置，比如如下的组件结构：

> body

  > ComponentA

      > ComponentB

          > ComponentC

渲染之后的层级结果是body>ComponentA>ComponentB>ComponentC。

对于一些特殊组件，比如弹出框，无论组件层次多深，我们都需要将其移动到body下来是使用绝对定位。对于如上例子，需要将ComponentC挪到body下变成：

> body

  > ComponentA

      > ComponentB

  > ComponentC

两个步骤来实现

1. 获取ComponentC的HTML Element。

对应方法为：this.$el。

2. 将HTML Element挪动到想要的位置，比如:document.body。

使用方法为：Node.appendChild()，例如：

document.body.appendChild(this.$el)

Node.appendChild 方法说明

以下截图来自MDN 文档：

可以得出，如果child参数如果指向一个已经存在的节点，appendChild() 会把它从当前位置挪到新位置。