Template refs

• 기본 DOM 요소에 직접 접근해야 하는 경우가 있을 수 있다.이때 ref 특수 속성을 사용해서 쉽게 접근
• ref 특수 속성을 통해 마운트된 DOM 요소 또는 자식 컴포넌트에 대한 참조를 얻을 수 있다.

<input type="text" ref="input" />

Refs로 접근하기

• Composition API로 참조를 얻으려면 동일한 이름의 참조를 선언
• 컴포넌트가 마운트된 후에 접근할 수 있다.
• <template> 안에서 input으로 ref 참조에 접근하려는 경우 렌더링되기 전에는 참조가 null
• <template> 안에서 $refs 내장 객체로 refs 참조에 접근할 수 있다.

v-for 내부 참조

• v-for 내부에서 ref가 사용될 때 ref는 마운트 후 요소 배열로 체워집니다.

Function Refs

• ref속성에 문자열 키 대신 함수를 바인딩 가능

예제

<template>
  <main>
    <TemplateRefs></TemplateRefs>
  </main>
</template>

<script>
import TemplateRefs from "./TemplateRefs.vue";

export default {
  components: {
    TemplateRefs,
  },
  setup() {
    return {};
  },
};
</script>

<style lang="scss" scoped></style>

<template>
  <div class="container py-4">
    <input type="text" ref="input" />
    <p>{{ input }}</p>
    <p v-if="input">{{ input.value }} {{ $refs.input.value }}</p>
    <hr />
    <ul>
      <!-- <li v-for="fruit in fruits" :key="fruit" ref="itemRefs">{{ fruit }}</li>
       -->
      <li
        v-for="fruit in fruits"
        :key="fruit"
        :ref="(el) => itemRefs.push(el.textContent)"
      >
        {{ fruit }}
      </li>
    </ul>
  </div>
</template>

<script>
import { onMounted, reactive, ref } from "vue";

export default {
  setup() {
    const input = ref(null);
    console.log("setup ", input.value);
    onMounted(() => {
      input.value.value = "Hello world";
      console.log("onMounted ", input.value);

      // itemRefs.value.forEach((item) => console.log(item.textContent));
      itemRefs.value.forEach((item) => console.log(item));
    });

    const fruits = ref(["사과", "딸기", "포도"]);
    const itemRefs = ref([]);
    return { input, fruits, itemRefs };
  },
};
</script>

<style lang="scss" scoped></style>