vue3.0新特性teleport

比如自己写个modal组件时，挂载到body上最好的选择，可以通过z-idnex来控制层级。但是又想在引用modal组件的组件内来管理它，vue2.0需要特殊的处理，如用指令的方式。vue3.0则可以用teleport来实现：

<template>
  <teleport to="body" class="modal" v-if="show">
    <div class="modal-mask" @click="close"></div>
    <slot></slot>
  </teleport>
</template>

<script>
import "./style.scss";
export default {
  props: {
    show: Boolean,
  },
  methods: {
    close() {
      this.$emit("close");
    },
  },
};
</script>

当然，用elementui则可以通过append-to-body属性即可，如这样：

 <el-dialog
      :visible.sync="dialogFormVisible"
     append-to-body
      @open="show"
      @close="closeDialog"
    >
      <ChildComponents />
    </el-dialog>