Vue에서 Teleport 구성 요소를 사용하는 방법에 대한 심층적인 설명

Vuejs에서 Teleport 구성 요소를 사용하는 방법은 무엇입니까? 다음 기사에서는 Vue에서 Teleport 구성 요소를 사용하는 방법을 설명합니다. 도움이 되기를 바랍니다.

상대적으로 복잡한 DOM 구조와 깊은 계층적 중첩이 있는 컴포넌트에서는 해당 모듈 비즈니스를 기반으로 일부 로직을 처리해야 합니다. 이 로직은 현재 컴포넌트DOM结构相对比较复杂,层级嵌套比较深的组件内,需要根据相对应的模块业务处理一些逻辑,该逻辑属于当前组件

但是从整个页面应用的视图上看,它在DOM中应该被渲染在整个vue应用外部的其他地方,不能影响组件的结构

比较常见的应用场景:就是全屏的模态框,控制元素的位置,也是可以处理的,但是比较麻烦

在理想情况下,我们希望在具体的组件中,给元素绑定的事件,与具体要控制的DOM元素结构在同一个组件中,具体的位置处,保持一定的相关联性。【相关推荐：vuejs视频教程、web前端开发】

而不用特意的把一些DOM结构给分离出去,然而,在同一组件中,触发模态框的按钮和模态框本身在同一组件中

因为他们都与组件的开关状态有相关联,模态框与按钮一起渲染在应用DOM结构很深的地方,会导致模态框的css布局位置非常难控制

鉴于这样的场景和困难,Vue官方提供了一个Teleport组件,很好的可以解决这个问题,让开发者不需要顾虑DOM结构的问题

01-组件套组件层次结构很深时

比如:现在有两个组件,父组件,子组件,在后代组件内,添加一个按钮,弹出一个模态框,让它在页面垂直水平居中显示

如下所示,父组件如下所示App.vue

<template>
    <div class="App">
        我是父组件
        <Child />
    </div>
</template>
<script setup>
    import Child from "./Child.vue"
</script>
<style>
.App {
    width: 400px;
    height: 400px;
    background:red;
}
</style>

如下是Child组件,示例代码如下所示Child.vue,我们需要在孙(后代)组件,添加一个按钮,点击按钮,弹出一个弹框,水平垂直居中显示在页面中央

<template>
    <div class="child">
      <p>我是子组件</p>
        <button @click="isModel=true">打开模态框</button>
        <div class="mask-dialog" v-if="isModel">
             <div class="box">
                  <h2>我是标题</h2>
                  <div>我是弹框内容</div>
                  <div>
                      <button @click="isModel=false">关闭</button>
                  </div>
             </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from "vue";
let isModel = ref(false);
</script>
<style>
.child {
    width: 300px;
    height:300px;
    background:green;
}
/**灰色遮罩层 */
  .mask-dialog {
    width: 100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    background:rgba(0,0,0,0.5)
  }
  
  .box {
    width: 200px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    background:pink;
    text-align:center;
  }
</style>

上面的子组件中有一个button按钮来触发打开当前组件的模态框,里面存在着控制弹框的显示和隐藏的逻辑,当嵌套的组件比较深,复杂时

如果父级元素存在定位,那在控制子元素的位置时,用css的transform或者position:absolute,参照对象的变更,会破坏布局结构,会出现一些css样式

控制的问题,解决起来会非常的痛苦

那这个Teleport组件就是为了解决这类问题,可以将指定的DOM结构片段,独立于到组件外面去,不受当前组件布局结构的影响

经过Teleport的修改后

<template>
    <div class="child">
      <p>我是子组件</p>
        <button @click="isModel=true">打开模态框</button>
        <Teleport to="body">
            <div class="mask-dialog" v-if="isModel">
                 <div class="box">
                      <h2>我是标题1</h2>
                      <div>我是弹框内容</div>
                      <div>
                          <button @click="isModel=false">关闭</button>
                      </div>
                 </div>
            </div>
        </Teleport>  
    </div>
</template>
<script setup>
import { ref } from "vue";
let isModel = ref(false);
</script>
<style>
.child {
    width: 300px;
    height:300px;
    background:green;
}
/**灰色遮罩层 */
  .mask-dialog {
    width: 100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    background:rgba(0,0,0,0.5)
  }
  
  .box {
    width: 200px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    background:pink;
    text-align:center;
  }
</style>

095a8c77e9bc5f13289f43baf6c8bdc1接收一个 to prop 来指定传送的目标。to 的值可以是一个 CSS 选择器字符串，或id,也可以是一个 DOM 元素对象。这段代码的作用就是告诉 Vue把以下模板片段传送到 body 标签下

<Teleport to="#some-id">html结构代码</Teleport>
<Teleport to=".some-class">html结构代码</Teleport>
<Teleport to="body">html结构代码</Teleport>
<Teleport to="html">html结构代码</Teleport>

02-Teleport组件

它是Vue官方提供的一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOMhtml结构移动到指定位置的技术

<teleport to="移动到指定的位置,可以是html,body,或id,class">
   里面是Html结构模板内容
</teleport>

注意

095a8c77e9bc5f13289f43baf6c8bdc1 挂载时，传送的 to 目标必须已经存在于DOM中。理想情况下，这应该是整个 Vue 应用 DOM 树外部的一个元素。如果目标元素也是由 Vue 渲染的，你需要确保在挂载 095a8c77e9bc5f13289f43baf6c8bdc1 之前先挂载该元素

这个teleport将指定的模板html,放置到页面当中指定的位置处,它是有条件的,不是可以任意传送的

在安装组件之前，目标元素必须存在,即,目标不能由组件本身呈现，理想情况下应该位于整个Vue组件树之外。

如下代码是不行的

<template>
    <div>
        <Teleport to=".content">
            <div>我是头部的内容</div>
        </Teleport>
         
    </div>
    <div>
        底部内容
        <div></div>
    </div>
</template>
<script setup>
</script>
<style>
h1 {
    color: red;
}
</style>

03-需要知道的

teleport只是改变了渲染的 DOM 结构，它不会影响组件间的逻辑关系。也就是说，如果 095a8c77e9bc5f13289f43baf6c8bdc1 包含了一个组件，那么该组件始终和这个使用了 6c123bcf29012c05eda065ba23259dcb 的组件保持逻辑上的父子关系。传入的 props에 속합니다. 전체 페이지 애플리케이션 보기에서는 전체 vue 애플리케이션 외부의 다른 위치에 있는 DOM에서 렌더링되어야 하며 구성 요소의 구조에 영향을 미칠 수 없습니다

🎜A more common 적용 시나리오: 전체 화면 모달 상자를 처리하여 요소의 위치를 ​​제어할 수도 있지만 더 번거롭습니다.🎜🎜이상적인 상황에서는 특정 구성 요소의 요소에 바인딩된 이벤트가 특정 제어할 DOM 요소 구조는 동일한 구성 요소의 특정 위치에서 어느 정도 관련성을 유지합니다. [관련 권장사항: vuejs 비디오 튜토리얼, 웹 프론트엔드 개발]🎜🎜DOM을 추가하지 않고도 코드 >구조는 분리되어 있지만, 같은 컴포넌트에서 모달박스를 실행하는 버튼과 모달박스 자체는 같은 컴포넌트에 있습니다🎜🎜둘 다 컴포넌트의 스위치 상태인 모달박스와 모달박스와 연관되어 있기 때문입니다. 구조가 매우 깊은 <code>DOM을 적용하면 버튼이 함께 렌더링되므로 모달 상자의 CSS 레이아웃 위치를 제어하기가 매우 어려워집니다🎜🎜이러한 시나리오와 어려움을 고려하여 Vue 는 이 문제를 매우 잘 해결할 수 있는 Teleport 구성 요소를 공식적으로 제공하므로 개발자는 DOM 구조에 대해 걱정할 필요가 없습니다. 🎜

01-Component Set 구성 요소 계층 구조가 매우 깊은 경우

🎜예: 이제 상위 구성 요소와 하위 구성 요소라는 두 개의 구성 요소가 있습니다. 하위 구성 요소에 팝업 버튼을 추가합니다. 모달박스를 이용하여 페이지 중앙에 수직, 수평으로 표시되도록 하세요🎜🎜 아래와 같이 상위 컴포넌트는 App.vue🎜

<Teleport :disabled="isMobile">
  ...
</Teleport>

🎜다음은 Child 컴포넌트입니다. 컴포넌트이며, 샘플 코드는 다음과 같습니다: Child.vue, 손자(하위) 컴포넌트에 버튼을 추가해야 합니다. 버튼을 클릭하면 팝업 상자가 나타납니다. 위의 하위 구성 요소에는 열기를 트리거하는 버튼 버튼이 있습니다. 현재 구성 요소의 모달 상자에는 논리가 포함되어 있습니다. 팝업 상자 표시 및 숨기기를 제어하려면 중첩된 구성 요소가 깊고 복잡할 때 상위 요소에 위치 지정이 있는 경우 하위 요소의 위치를 ​​제어할 때 transform 또는 position:absolute, 참조 객체를 변경하면 레이아웃 구조가 파괴되고 일부 css 스타일이 나타날 것입니다. 🎜🎜컨트롤 문제는 매우 고통스럽습니다. tosolve🎜🎜그러면 이 Teleport 컴포넌트는 이런 종류의 문제를 해결하기 위해 지정된 DOM 구조 조각을 컴포넌트 외부에 독립적으로 만들 수 있으며 영향을 받지 않습니다. 현재 구성 요소 레이아웃 구조🎜🎜Teleport🎜

<Teleport to=".content">
  <div>A</div>
</Teleport>
<Teleport to=".content">
  <div>B</div>
</Teleport>

🎜095a8c77e9bc5f13289f43baf6c8bdc1로 수정한 후 순간 이동 대상을 지정하는 to prop를 받습니다. . to의 값은 CSS 선택기 문자열 또는 id이거나 DOM 요소 개체일 수 있습니다. . 이 코드의 기능은 Vue에 다음 템플릿 조각을 body 태그🎜

<div class="content">
  <div>A</div>
  <div>B</div>
</div>

02-Teleport로 보내도록 지시하는 것입니다. 컴포넌트🎜Vue에서 공식적으로 제공하는 내장 컴포넌트입니다. 컴포넌트 내부의 템플릿 일부를 의 외부 레이어 위치로 "전송"할 수 있습니다. 구성 요소의 DOM 구조입니다. 우리의 컴포넌트 html 구조를 지정된 위치로 이동할 수 있는 기술입니다🎜rrreee🎜참고🎜🎜095a8c77e9bc5f13289f43baf6c8bdc1 <code>to 대상은 DOM에 이미 존재해야 합니다. 이상적으로 이는 전체 Vue 애플리케이션의 DOM 트리 외부에 있는 요소여야 합니다. 대상 요소도 Vue로 렌더링되는 경우 095a8c77e9bc5f13289f43baf6c8bdc1를 마운트하기 전에 요소를 마운트해야 합니다. 🎜🎜이 teleport 지정된 템플릿 html을 페이지의 지정된 위치에 배치합니다. 조건부이므로 임의로 전송할 수 없습니다. 구성 요소를 설치하기 전에 대상 요소가 있어야 합니다. 즉, 대상이 될 수 없습니다. 이상적으로는 전체 Vue 구성 요소 트리 외부에 있어야 합니다. 🎜🎜다음 코드는 작동하지 않습니다🎜rrreee

03-알아두어야 할 사항

🎜teleport는 렌더링된 DOM만 변경합니다. code> 구조는 구성 요소 간의 논리적 관계에 영향을 미치지 않습니다. 즉, <code><teleport></teleport>에 구성 요소가 포함되어 있으면 해당 구성 요소는 <teleport></teleport>를 사용하는 구성 요소와 항상 논리적인 상위-하위 관계를 유지합니다. 들어오는 props 및 트리거된 이벤트도 평소와 같이 작동합니다. 🎜

这也意味着来自父组件的注入也会按预期工作，子组件将在 Vue Devtools 中嵌套在父级组件下面，而不是放在实际内容移动到的地方

位置移动了,提现在结构模板上,但是数据逻辑依旧存在关联的

04-如何禁用 Teleport

在某些场景下可能需要视情况禁用 095a8c77e9bc5f13289f43baf6c8bdc1。举例来说，我们想要在桌面端将一个组件当做浮层来渲染，但在移动端则当作行内组件。我们可以通过对 095a8c77e9bc5f13289f43baf6c8bdc1 动态地传入一个 disabled prop 来处理这两种不同情况

<Teleport :disabled="isMobile">
  ...
</Teleport>

这里的 isMobile 状态可以根据 CSS media query 的不同结果动态地更新

05-多个 Teleport 共享目标时

一个可重用的模态框组件可能同时存在多个实例。对于此类场景，多个 095a8c77e9bc5f13289f43baf6c8bdc1 组件可以将其内容挂载在同一个目标元素上，而顺序就是简单的顺次追加，后挂载的将排在目标元素下更后面的位置上

比如下面这样的用例

<Teleport to=".content">
  <div>A</div>
</Teleport>
<Teleport to=".content">
  <div>B</div>
</Teleport>

渲染的结果为

<div class="content">
  <div>A</div>
  <div>B</div>
</div>

总结

这个teleport组件在实际开发中还是很实用的,能够解决当组件嵌套层级很深,而后代组件中的模板,想要脱离当前组件结构,解决css布局层面的干扰,那就可以用这个teleport组件

（学习视频分享：vuejs入门教程、编程基础视频）

위 내용은 Vue에서 Teleport 구성 요소를 사용하는 방법에 대한 심층적인 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!