Vue3 内置组件之Teleport

概述

Teleport 中文翻译为“瞬间移动”，顾名思义，在Vue3 中 <Teleport> 组件可以将组件中内容移动到指定的目标元素上。

用法

<script setup>
import {ref} from "vue";const disabled = ref(false);
const selectedOption = ref("false");
const handleChange = () => {disabled.value = selectedOption.value === "true";
};
</script><template><h3>是否使用Teleport</h3><input v-model="selectedOption" type="radio" value="true" @change="handleChange">禁用<input v-model="selectedOption" type="radio" value="false" checked @change="handleChange">不禁用<div id="box1"><p>box1</p></div><div id="box2"><p>box1</p></div><Teleport to="#box1" :disabled="disabled">hello Teleport</Teleport>
</template><style scoped>
div {border: 1px solid red;
}
</style>

使用Teleport：

说明：Teleport 组件中的内容被挂载到 “#box1” 中。

点击禁用按钮：

说明：选择禁用后，Teleport组件则保持不变。