【vue3】传送组件、Teleport

本文主要是介绍【vue3】传送组件、Teleport，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

把test里的内容传送到test2

//test1.vue
<template><div>test1<Teleport v-if="flag" to=".aa">test1的内容</Teleport></div></template><script setup lang='ts'>import { ref,reactive,onMounted } from 'vue'const flag = ref(false)onMounted(()=>{flag.value = true})</script>
<style scoped lang='scss'></style>

//test2.vue
<template><div>test2:<span class="aa"></span></div></template><script setup lang='ts'>// import { ref,reactive } from 'vue'</script>
<style scoped lang='scss'></style>

//app.vueimport Test1 from './components/test1.vue';import Test2 from './components/test2.vue';<template><div id = 'app'><Test1></Test1><Test2></Test2></div></template>

注意！！

一定要用v-if控制Teleport 组件，确保它在onMounted加载完成之后传送。如果不加会报错：
Note the target element must exist before the component is mounted
Invalid Teleport target on mount: null

这篇关于【vue3】传送组件、Teleport的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---