[Vue.js 3] Teleport, Slot, v-model binding, toRefs

프로젝트로 배우는 Vue.js 3

이 포스팅에서 작성하는 내용은 프로젝트로 배우는 Vue.js 3 에서 발췌하였습니다.

https://inf.run/sxQT

프로젝트로 배우는 Vue.js 3 - 인프런 | 강의

---

Teleport

• HTML 요소를 특정 영역으로 보낼 수 있는 태그
• Modal, Alert 창 같은 기능에서 유용하게 사용될 수 있을 것으로 보인다.
• 아래는 teleport 태그를 이용해서 id가 div1 인 영역으로 보내는 간단한 예시이다.

<template>
  <div id="div1">
    <p> div1 </p>
  </div>
  <div>
    <teleport to="#div1">
      <p> teleport element </p>
    </teleport>
  </div>
</template>

<script>
  ...
</script>

 

Slot

• 다른 컴포넌트로 HTML 요소를 전달하는 방법
• slot 요소에 name을 정해서 원하는 slot에 HTML 요소를 전달할 수 있다.
• 만약, template 뒤에 name을 지정하지 않으면 default로 설정된다.

SampleComponent.vue

<template>
  <slot name="slot1"/>
  <slot name="slot2"/>
</template>
<script>
</script>

 

main.vue

<template>
  <SampleComponent>
    <template v-slot:slot1>
      <p>slot1 template</p>
    </template>
    <template #slot2> <!-- v-slot 대신, # 사용 가능
      <h1>slot2 template</h1>
    </template>
  </SampleComponent>
</template>
<script>
</script>

 

v-model binding

https://vuejs.org/guide/components/v-model.html#multiple-v-model-bindings

Component v-model | Vue.js

 

toRefs

• reactive 변수를 다른 컴포넌트에 전달할 때, toRefs로 전달해줘야 해당 변수의 값을 수정할 수 있다.
  https://vuejs.org/api/reactivity-utilities.html#torefs

Reactivity API: Utilities | Vue.js