Vue3에 내장된 Teleport 구성요소를 사용하는 방법

1. 기본 개념

1.1 간단한 이해

Vue2와 Vue3 모두 컴포넌트 내장 컴포넌트, 전환 내장 컴포넌트 등 내장 컴포넌트가 있습니다. 내장 구성 요소는 공식적으로 캡슐화되어 있는 전역 구성 요소로 직접 사용할 수 있습니다.

Teleport 내장 구성 요소가 Vue3에 추가되었습니다. 먼저 공식 문서에서 어떻게 설명하는지 살펴보겠습니다.

는 구성 요소 내부의 템플릿 일부를 구성 요소 DOM 구조의 외부 위치로 "전송"할 수 있는 내장 구성 요소입니다.

인기 있는 설명:

teleport는 내장된 구성 요소입니다. 우리 모두는 HTML에 계층적 관계가 있고 Vue3의 구성 요소도 계층적 관계가 있다는 것을 알고 있습니다.

하위 구성 요소가 상위 구성 요소에서 참조되는 경우 하위 구성 요소 HTML은 페이지로 렌더링된 후 상위 구성 요소 HTML에 확실히 포함됩니다.

그러나 하위 구성 요소가 텔레포트 구성 요소에 배치되면 하위 구성 요소가 본문이나 다른 DOM 등과 같은 상위 구성 요소가 아닌 다른 DOM 노드 아래에 렌더링되도록 지정할 수 있습니다. 이것은 "순간이동"과 다소 유사합니다.

1.2 일반적인 경우

Vue의 UI 컴포넌트 라이브러리를 사용할 때 모달 박스 컴포넌트를 자주 사용합니다. 예를 들어 Element-plus의 모달 상자를 사용하십시오.

<template>
  <el-button @click="dialogVisible = true">打开弹窗</el-button>
  <el-dialog
    v-model="dialogVisible"
    append-to-body
    title="我是弹窗"
    width="30%">
  </el-dialog>
</template>

<script>
import { ref } from &#39;vue&#39;;
export default {
  setup(){
    const dialogVisible = ref(false);
    return {
      dialogVisible
    }
  } 
}
</script>

위 코드에서는 Element-plus 팝업 컴포넌트가 App.vue 컴포넌트에서 참조되고, Append-to-body 속성이 추가됩니다.

팝업 컴포넌트는 App.vue 컴포넌트에 작성되었으나 렌더링 결과는 팝업 컴포넌트가 바디 노드에 속해 있음을 알 수 있습니다. Element-plus의 up 창을 사용했습니다. to-body 속성을 제거하고 결과를 살펴보겠습니다.

팝업 구성 요소가 App.vue 구성 요소 아래로 사라진 것을 볼 수 있습니다.

왜 이러는 걸까요?

팝업창이 많은 경우, 각 팝업창이 동시에 팝업될 때의 Z-index, 즉 계층적 관계를 관리하는 방법은 매우 간단합니다. 제어할 수 있는 방법이 없으므로 이들을 비틀어서 동일한 상위 요소 아래에 배치해야 계층 관계를 쉽게 설정할 수 있습니다.

텔레포트 구성 요소와 관련이 있나요? 위 팝업 창의 본문에 추가 속성 효과는 Element에 의해 수행됩니다. 내장된 구성 요소 텔레포트를 사용할 수 있습니다.

2. 기본 사용법

2.1 DOM 노드 전송

<template>
  <div class="app">
    App组件
    <Teleport to="body">
      <div>我是被 teleport 包裹的元素</div>
    </Teleport>
  </div>
</template>

위 그림에서 볼 수 있듯이 Teleport로 래핑된 요소는 app.vue 컴포넌트에 속하지만 렌더링 후에는 body dom에 렌더링됩니다. 아래 요소.
이것은 모두 Teleport의 전송 기능 덕분입니다. 사용법은 매우 간단합니다. 구문 코드는 다음과 같습니다.

to는 "전송"의 대상, 즉 패키지의 내용을 전송해야 하는 위치입니다.

<Teleport to="body">
</Teleport>

to 允许接收值：
期望接收一个 CSS 选择器字符串或者一个真实的 DOM 节点。
提示：
<Teleport> 挂载时，传送的 to 目标必须已经存在于 DOM 中。理想情况下，这应该是整个 Vue 应用 DOM 树外部的一个元素。
如果目标元素也是由 Vue 渲染的，你需要确保在挂载 <Teleport> 之前先挂载该元素。

2.2 Teleport 컴포넌트

는 렌더링된 DOM 구조만 변경하며 컴포넌트 간의 논리적 관계에는 영향을 미치지 않습니다.

즉, 구성 요소가 포함되어 있으면 해당 구성 요소는 를 사용하는 구성 요소와 항상 논리적인 상위-하위 관계를 유지합니다. 들어오는 소품과 트리거된 이벤트도 평소대로 작동합니다.

이는 또한 상위 구성 요소의 주입도 예상대로 작동하고 하위 구성 요소는 실제 콘텐츠가 이동되는 위치에 배치되지 않고 Vue Devtools의 상위 구성 요소 아래에 중첩된다는 것을 의미합니다.

// 父组件
<template>
  <div class="app">
    <Teleport to="body">
      <div>被 teleport 包裹的组件-- {{count}}</div>
      <ChildComponent v-model="count"/>
    </Teleport>
  </div>
</template>

<script>
import { ref } from &#39;vue&#39;;
import ChildComponent from &#39;@/components/childComponent&#39;;
export default {
  components:{
    ChildComponent
  },
  setup(){
    const count = ref(100);
    return {
      count,
    }
  } 
}
</script>

// 子组件
<template>
  子组件：<input type="text" v-model.number="inputVal" @input="userInput">
</template>

<script>
import { ref, watch } from &#39;vue&#39;;
export default {
  props:{
    modelValue:{
      default:0,
    }
  },
  setup(props,{emit}) {
    const inputVal = ref(null);
    const userInput = () => {
      emit(&#39;update:modelValue&#39;, inputVal.value)
    };

    watch(props,(newVal,oldVal) => {
      inputVal.value = props.modelValue;
    },{immediate:true})
    return {
      userInput,
      inputVal,
    }
  },
}
</script>

2.3 텔레포트 기능 비활성화

상황에 따라 비활성화된 속성을

<template>
  <div class="app">
    app组件
    <Teleport to="body" :disabled="true">
      <p>我是被 teleport 包裹的元素</p>
      <p>{{ message }}</p>
    </Teleport>
  </div>
</template>

<script>
import { ref } from &#39;vue&#39;;
export default {
  setup(){
    const message = ref(&#39;我是在 App 组件内部&#39;);
    return {
      message,
    }
  } 
}
</script>

2.4 여러 요소가 하나의 노드로 전송됩니다

여러 구성 요소는 해당 콘텐츠를 동일한 대상 요소에 마운트할 수 있으며 순서는 단순히 하나씩 추가한 다음 마운트하는 것입니다. 대상 요소보다 더 뒤에 배치됩니다.

rrreerrree

위 내용은 Vue3에 내장된 Teleport 구성요소를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!