面试题：Vue中如何在动态条件下切换Teleport的目标元素

Question

假设在Vue项目中有一个按钮，点击按钮后需要将Teleport的目标元素从一个id为'target1'的div切换到id为'target2'的div，简述实现思路并给出关键代码片段。

Answer 1

实现思路

1. 在Vue组件中定义一个数据变量来存储Teleport的目标元素id。
2. 为按钮绑定点击事件，在事件处理函数中切换目标元素id。
3. 在Teleport组件中使用该数据变量作为目标元素的选择器。

关键代码片段

<template>
  <div>
    <button @click="switchTarget">切换Teleport目标</button>
    <Teleport :to="teleportTarget">
      <div>需要被Teleport的内容</div>
    </Teleport>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const teleportTarget = ref('target1');

const switchTarget = () => {
  teleportTarget.value = teleportTarget.value === 'target1'? 'target2' : 'target1';
};
</script>

<style scoped>
#target1, #target2 {
  border: 1px solid gray;
  padding: 10px;
  margin: 10px;
}
</style>

在上述代码中：

• teleportTarget 是一个响应式数据，用于存储Teleport的目标元素id。
• switchTarget 函数在按钮点击时切换 teleportTarget 的值。
• <Teleport :to="teleportTarget"> 根据 teleportTarget 的值来决定Teleport的目标元素。