template ref
태그 같은 DOM element요소를 ref를 이용하여 접근하자

templateRef

기본

<script setup>
  const inputRef = ref(null);
  console.log('setup이후의 ref:', inputRef.value);//null
  onMounted(()=>{
    inputRef.value.value = 'hello ref'
    console.log('마운트이후의 ref:', inputRef.value);
</script>


<template>
  <div>
    <input ref="inputRef" type="text" />
    <p>
      {{ inputRef }}
    </p>
    <!--mounted가 되어야만 출력가능하기때문에 에러
    <p>
      {{ inputRef.value }}
    </p>
    -->
    <p v-if="inputRef">
      {{ inputRef.value }}
    </p>
    <p>
      {{ inputRef === $refs.inputRef }} 
    </p>
      
  </div>
</template>
image image



for을 통한 ref

<script setup>
  import { ref, onMounted } from 'vue'
  const arrayRefs = ref([]);
  const fruits = ref(['사과', '딸기', '포도']);
  onMounted(()=>{
    arrayRefs.value.forEach(item => console.log('item1: ', item.textContent));
    
    arrayRefs.value.forEach(item => console.log('item: ', item));
  })
</script>


<template>
  <div>
    <ul>
      <li
          v-for="fruit in fruits"
          :key="fruit"
          ref="arrayRefs">변수이용: {{ fruit }}</li>
    </ul>
    <ul>
      <li
          v-for="fruit in fruits"
          :key="fruit"
          ref="element => arrayRefs.push(element.textContent)">함수 이용: {{ fruit }}</li>
    </ul>
  </div>
</template>
image image



자식, 부모Component에서의 ref

권장하지않음(props를 사용하자.)

<script setup>에서는 expose를 따로 설정해줘야한다

자식Component

<template>
  <div>
     <!--부모접근가능-->
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue'
  const message = ref('Hello Im Child');
  const say = () =>{
    console.log(message.value);
  }

  defineExpose({
    message,
    say,
  })
</script>

부모Component

<script setup>
  import { ref, onMounted } from 'vue'
    import TemplateChildRefs from './TemplateChildRefs.vue'
  const child = ref(null);
  onMounted(()=>{
    console.log('child.message', child.value.message);
    child.value.say();
  })

  const parentHi = 'hi';
  defineExpose({
    parentHi,
  })
</script>

<template>
  <TemplateChildRefs ref="child"></TemplateChildRefs>
</template>

참고자료: Vue3 완벽 마스터: 기초부터 실전까지 - “기본편”

소스코드 바로확인하기

Javascript

Frontend

Vue

댓글 쓰기

You may also enjoy

pinia기본

May 05 2023

src/main.js ```js import { createPinia } from ‘pinia’;

github pages에서 vue router 404 에러

April 03 2023

배경1. vue 프로젝트를 github pages를 통해 myurl.com에 배포를 했다 배경2. vue router를 사용하여 myurl.com/posts 페이지가 있다 배경3. vue router의 history모드는 createWebHistory를 사용한다 myurl.co...