面试题：Vue Teleport在跨框架协作时的一个常见应用场景及实现步骤

实际应用场景

假设在一个大型项目中，部分模块使用React构建，部分模块使用Vue构建。在Vue模块中，需要在React模块提供的特定DOM元素内插入Vue组件内容，比如React模块中有一个全局模态框容器，Vue组件的弹出层内容需要挂载到这个容器中，以实现统一的样式管理和交互逻辑，此时就可以使用Vue Teleport。

使用Vue Teleport实现该场景的步骤

在Vue组件中引入Teleport：

<template>
  <div>
    <button @click="showModal = true">打开模态框</button>
    <teleport to="#react-modal-container">
      <div v-if="showModal" class="vue-modal">
        <p>这是Vue组件中的模态框内容</p>
        <button @click="showModal = false">关闭</button>
      </div>
    </teleport>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false
    };
  }
};
</script>

<style scoped>
.vue-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border: 1px solid gray;
  z - index: 1000;
}
</style>

在React模块中确保存在目标DOM元素：

import React from 'react';

const App = () => {
  return (
    <div>
      <div id="react-modal-container"></div>
      {/* React其他内容 */}
    </div>
  );
};

export default App;

这样，Vue组件中的模态框内容就会被“传送”到React模块指定的DOM元素内。

星途面试题库

面试题：Vue Teleport在跨框架协作时的一个常见应用场景及实现步骤

知识考点

面试题答案

实际应用场景

使用Vue Teleport实现该场景的步骤