vue2手动实现传送门Teleport组件

前言：vue3中出了新个特性Teleport, 官方的解释是这样说的‘<Teleport> 是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去’。简单点说就是传送门，非常的实用。但vue2是没有的，不过我们可以手动去实现一个。

项目实战

一、封装一个Teleport组件

<script>
export default {
  name: 'Teleport',
  data() {
    return {
      isMounted: false
    }
  },
  props: {
    to: { // 传送目标
      type: String,
      require: true
    }
  },
  // 挂载元素
  mounted() { 
    this.isMounted = true
    document.querySelector(this.to).appendChild(this.$el)
  },
  // 组件激活时
  activated() {
    if (this.isMounted) return
    document.querySelector(this.to).appendChild(this.$el)
  },
  // 路由切换移除
  deactivated() {
    this.isMounted = false
    this.$el && this.$el.parentNode && this.$el.parentNode.removeChild(this.$el)
  },
  // render函数渲染，使用模板的方式也是可以的
  render() {
    return <div class='teleport'>{this.$scopedSlots.default()}</div>
  },
  // 组件销毁时移除
  destroyed() {
    this.isMounted = false
    this.$el && this.$el.parentNode && this.$el.parentNode.removeChild(this.$el)
  }
}
</script>

二、用法

先将需要外部扩展的地方进行占位

<div>
 <div id="navtopTab"></div> // 进行占位
</div>

然后再使用传输门<Teleport>进行传送

<Teleport to="#navtopTab">
  <el-tabs v-model="activeName">
    <el-tab-pane name="0" label="数据总览"></el-tab-pane>
    <el-tab-pane name="1" label="接收规则"></el-tab-pane>
  </el-tabs>
</Teleport>