面试题：Vue中Teleport如何实现基本的跨组件DOM操作

Question

在Vue项目中，假设存在一个父组件和一个子组件，子组件中有一个按钮，点击按钮要在body标签下创建一个新的div元素。请使用Vue Teleport实现这一功能，并简述Teleport实现跨组件DOM操作的原理。

Answer 1

实现步骤

1. 子组件模板：

<template>
  <button @click="createDiv">创建div</button>
  <Teleport to="body">
    <div v-if="showDiv" id="newDiv">这是新创建的div</div>
  </Teleport>
</template>

<script>
export default {
  data() {
    return {
      showDiv: false
    };
  },
  methods: {
    createDiv() {
      this.showDiv = true;
    }
  }
};
</script>

2. 父组件模板：

<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  }
};
</script>

Teleport实现跨组件DOM操作原理

Teleport 组件的核心原理是将其包裹的内容渲染到指定的 DOM 节点下，而不是按照 Vue 组件的常规嵌套层级进行渲染。Vue 在渲染组件树时，会创建一个虚拟 DOM 树。对于 Teleport 组件，Vue 会特殊处理，在渲染时，Teleport 内部的内容会被“传送”到指定的目标 DOM 节点下，而不是其在组件树结构中的逻辑父节点下。这样就实现了在逻辑上属于某个组件的内容，在 DOM 结构上可以位于其他位置，从而完成跨组件的 DOM 操作。这使得开发者可以在不破坏组件封装性和逻辑结构的前提下，将特定的 DOM 元素渲染到指定位置，例如 body 标签下，常用于创建模态框、提示框等需要在顶层 DOM 结构中渲染的组件。