我对teleport的理解
teleport有传送的意思，读音【te li po t】[嘻嘻],看官们应该知道读啥子了吧
它可以将你写的代码传送到某一个地方
传送到哪一个地方呢？
传送到你标记的地方，比如说传送到body下，html下

官方说：Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术，
上面这一句话是说传送到除了app之外的地方。
也就是说不能够传送到app之内。【注意了】
点像哆啦A梦的“任意门”
主要运用在弹窗上，消息提示，这样的场景！
下面我们就来简单使用一下:
我们将弹窗组件移动到body下
场景描述
a-test组件中有b-test组件，b-test组件中有c-mask[弹窗组件]
我们点击按钮，将b-test组件中的组件c-mask[弹窗组件]移动到body下
容器下有a-test组件
<template>
  <div class="box">
    <a-test></a-test>  
  </div>
</template>

<script>
import atest from '../components/a-test.vue'
  export default {
    components:{
      'a-test':atest,
    },
  }
</script>
a-test组件下有b-test组件
<template>
  <div class="a-test" >
    我是a-test组件
    <b-test></b-test>
    <div id="testdemo"></div>
  </div>
</template>

<script>
import btest from '../components/b-test.vue'
export default {
  components:{
      'b-test':btest
  },
}
</script>
b-test组件下有c-mask[弹窗组件]组件
<template>
  <div class="b-test">
    我是b-test组件
    <c-mask></c-mask>
  </div>
</template>

<script>
import cmask  from "./c-mask.vue"
export default {
  components:{
      'c-mask':cmask
  },
}
</script>
c-mask[弹窗组件]组件移动到body下
<template>
  <div>
    <a-button type="primary" @click="openHander">open</a-button>
    <!-- 将内容区域的代码移动到body下 -->
    <teleport to='body'>
      <div class="mask" v-if="showFlag">
        <h1>对话框组件</h1>
        <div>
            我是内容哈哈
        </div>
        <a-button  @click="openHander">关闭</a-button>
      </div>
    </teleport>
  </div>
</template>

<script>
import { ref } from '@vue/reactivity'
export default {
    setup () {
        let showFlag=ref(false)
        const openHander=()=>{
            showFlag.value=!showFlag.value
        }
        return {showFlag,openHander}
    }
}
</script>

vue3新特性teleport传送原来这么神奇_代码移动

主要注意的地方
通过上面的小粒子，想必你已经看明白了。
需要注意的是不可以移动到#app之内
我们可以在index.html中创建id=myapp的容器
将它传送在myapp容器下，我们看一下
index.html 创建一个容器
<body>
    <div id="app"></div>
    //等会将会传送到这里哈
    <div id="myapp"></div>
  </body>
传送
<template>
  <div>
    <a-button type="primary" @click="openHander">open</a-button>
    <!-- 将内容区域的代码移动到id=myapp下 -->
    <teleport to='#myapp'>
        <div class="mask" v-if="showFlag">
            <h1>对话框组件</h1>
            <div>
                我是内容哈哈
            </div>
            <a-button  @click="openHander">关闭</a-button>
        </div>
    </teleport>
  </div>
</template>
<script>
import { ref } from '@vue/reactivity'
export default {
  setup () {
    let showFlag=ref(false)
    const openHander=()=>{
        showFlag.value=!showFlag.value
    }
    return {showFlag,openHander}
  }
}
</script>

vue3新特性teleport传送原来这么神奇_html_02

遇见问题，这是你成长的机会，如果你能够解决，这就是收获。



作者：晚来南风晚相识

如果文中有什么错误，欢迎指出。以免更多的人被误导。