< /div > < /template > `vue-portal`是一个Vue插件，它提供了将组件传送到目标容器的能力。我们可以在Vue项目中安装这个插件，并将组件标记为传送门：

// main.js
import PortalVue from 'portal-vue'
Vue.use(PortalVue)

// MyComponent.vue
< template >
  < div >
    < h4 > 源组件 < /h4>
    < p > 这是一个源组件 < /p>
    < button @ click=" togglePortal "> 显示 / 隐藏传送门 < /button>
    < portal to=" portalTarget " v-if=" showPortal ">
      < h4 > 传送门组件 < /h4>
      < p > 这是一个传送门组件 < /p>
    < /portal>
  < /div >
< /template >

< script >
export default {
  data() {
    return {
      showPortal: false
    }
  },
  methods: {
    togglePortal() {
      this.showPortal = !this.showPortal
    }
  }
}
< /script >

段落二：在源组件中使用传送门 在源组件中，我们使用`portal`标签将需要传送的组件包裹起来，并使用`to`属性指定传送到哪个目标容器。在上述代码中，我们将传送门组件传送到了名为`portalTarget`的传送门目标容器。 同时，我们使用一个`showPortal`布尔变量控制传送门组件的显示和隐藏。通过点击按钮，我们可以动态切换传送门组件的显示状态。 段落三：在目标组件中创建传送门目标容器 在目标组件的根元素上使用`vue-portal-target`指令，我们可以创建一个传送门目标容器。这个容器用于接收源组件中的传送门组件，并将其渲染到自己的DOM节点中。 在上述代码中，我们在目标组件中创建了一个名为`portalTarget`的传送门目标容器，并使用`v-portal-target`指令进行标记。 段落四：总结 在Vue2中实现传送门效果可以通过使用`vue-portal-target`和`vue-portal`插件来实现。通过创建传送门目标容器和使用传送门标记，我们可以在组件树中实现跨组件通信和状态更新的能力。这种技术可以在复杂的应用程序中提供更灵活的组件通信方式，使得编写可维护和可复用的代码变得更加容易。