当在初始 HTML 结构中使用这个组件时，会有一些潜在的问题：

• position: fixed能够相对于视口放置的条件是：没有任何祖先元素设置了transform、perspective或者filter样式属性。而如果我们想要用 CSS transform为祖先节点
  设置动画，则会破坏模态框的布局结构！
• 这个模态框的z-index被包含它的元素所制约。如果有其他元素与
  重叠并有更高的z-index，则它会覆盖住我们的模态框。

  
  

  提供了一个更简洁的方式来解决此类问题，使我们无需考虑那么多层 DOM 结构的问题。让我们用改写一下：

  Open Modal 
   
  Hello from the modal!
   Close 

  接收一个to prop 来指定传送的目标。其值可以是一个 CSS 选择器字符串或者一个真实的DOM 节点。这里我们其实就是让 Vue 去“传送这部分模板片段到body标签下”。

  

  你可以将和结合使用来创建一个带动画的模态框。

  挂载时，传送门的to目标必须是已经存在于 DOM 之中。理想情况下，这应该是整个 Vue 应用 DOM 树外部的一个元素。如果目标元素也是由 Vue 渲染的，你需要确保在挂载在之前挂载该元素。

  
  

  搭配组件使用

  只改变了渲染的 DOM 结构，它不会影响组件间的逻辑关系。这也就是说，如果包含了一个组件，那么该组件始终和这个使用了的组件保持逻辑上的父子关系。传入的props和触发的事件也会照常工作。

  这也意味着来自父组件的注入也会按预期工作，子组件将在 Vue Devtools 中嵌套在父级组件下面，而不是放在实际内容移动到的地方。

  
  

  禁用传送门

  在某些场景中，你们可能需要视情况禁用。举个例子，我们想要在桌面端将一个组件当做浮层来渲染，但在移动端则当作行内组件。可以对动态地传入一个disabled prop 来处理这两种不同情况。

   ... 

  这里的isMobile状态可以根据 CSS media query 不同结果动态地更新。

  
  

  同一目标上多个传送门

  一个可重用的模态框组件可能同时存在多个实例。对于此类场景，多个组件可以将其内容挂载在同一个目标元素上，而顺序就是简单的顺次追加，后挂载的将排在目标元素下更后面的位置上。

  我们给出下面这样的用例：

   
  A 
  B

  渲染的结果为：

   
  A 
  B