【学习笔记】Vue3之Teleport

Vue3之Teleport

原文：https://vue3js.cn/docs/zh/guide/teleport.html#%E4%B8%8E-vue-components-%E4%B8%80%E8%B5%B7%E4%BD%BF%E7%94%A8

看一段代码：

const app = Vue.createApp({})

app.component('modal-button', {
    template: `
        <button @click="modalOpen = true">
            Open full screen modal!(With teleport!)
        </button>

        <teleport to="body">
            <div v-if="modalOpen" class="modal">
                <div>
                    I'm a teleported modal!
                    (My parent is "body")
                    <button @click="modalOpen = false">关闭</button>
                </div>
            </div>
        </teleport>
    `,
    data() {
        return {
            modalOpen: false
        }
    }
})

app.mount('#app')

与Vue components一起使用

如果<teleport>包含Vue组件，则它仍将是<teleport>父组件的逻辑子组件：

const app = Vue.createApp({
    template: `
        <h1>Root instance</h1>
        <parent-component />
    `
})

app.component('parent-component', {
    template: `
        <h2>This is a parent component</h2>
        <teleport to="#endofbody">
            <child-component name="John" />
        </teleport>
    `
})

app.component('child-component', {
    props: ['name'],
    template: `
        <div>Hello, {{ name }}</div>
    `
})

在这种情况下，即使在不同的地方渲染child-component，它仍将是parent-component的子级，并将从中接收name prop

这也意味着来自父组件的注入按预期工作，并且子组件将嵌套在Vue Devtools中的父组件之下，而不是放在实际内容移动到的位置。

在同一目标上使用多个teleport

一个常见的用例场景是一个可重用的<Modal>组件，它可能同时有多个实例处于活动状态。

<teleport to="#modals">
    <div>A</div>
</teleport>
<teleport to="#modals">
    <div>B</div>
</teleport>

<!-- result -->
<div id="modals">
    <div>A</div>
    <div>B</div>
</div>

teleport API

原文：https://vue3js.cn/docs/zh/api/built-in-components.html#teleport

【Props】

to - string，需要prop，必须是有效的查询选择器或HTMLElement(如果在浏览器环境中使用)。指定将在其中一栋<teleport>内容的目标元素

  <!-- 正确 -->
  <teleport to="#some-id" />
  <teleport to=".some-class" />
  <teleport to="[data-teleport]" />

  <!-- 错误 -->
  <teleport to="h1" />
  <teleport to="some-string" />

disabled - boolean. 此可选属性可用于禁用<teleport>的功能，这意味着其插槽内容将不会移动到任何位置，而是在您在周围父组件中指定了<teleport>的位置渲染。

<teleport to="#popup" :disabled="displayVideoInline">
    <video src="./my-movie.mp4">
</teleport>

请注意，这将移动实际的DOM节点，而不是被销毁和重新创建，并且它还将保持任何组件实例的活动状态。所有有状态的HTML元素（即播放的视频）都将保持其状态。