[Vue] - 템플릿 참조

템플릿 참조

 template에서 개발자가 특정 DOM 엘리먼트에 직접 접근해야 하는 경우나 컴포넌트의 정보를 접근하기 위해 사용하는 ref속성입니다. ref 는 v-for 의 key 속성과 유사한 특수 속성이며 이를 통해 마운트 된 특정 DOM 엘리먼트 또는 자식 컴포넌트 인스턴스에 직접적인 참조를 얻을 수 있습니다.

 

 

1. ref로 접근하기

 ref 속성을 사용하면 this.refs 로 접근할 수 있습니다. 주의할 점은 첫 랜더링이 끝날 때까지 엘리먼트가 존재하지 않기 때문에 컴포넌트가 마운트 된 이후에만 ref에 접근할 수 있습니다.

컴포넌트가 랜더링이 된 이후 적용 되기 때문에 반응형으로 구성하기 위한 computed 나 watch 에서 사용하면 안 됩니다.

export default {
  mounted() {
    this.$refs.input.focus()
  }
}

<template>
  <input ref="input" />
</template>

 

 

2. v-for 내부에서 ref 사용하기

 v3.2.25 이상부터 ref는 v-for 내부에서 사용하면 ref 값은 해당 엘리먼트를 포함하는 배열이 됩니다. 단, ref 배열은 소스 배열과 동일한 순서를 보장하지 않습니다.

export default {
  data() {
    return {
      list: [
        /* ... */
      ]
    }
  },
  mounted() {
    console.log(this.$refs.items) // this.list와 동일한 순서를 보장하지 않는다
  }
}

<template>
  <ul>
    <li v-for="item in list" ref="items">
      {{ item }}
    </li>
  </ul>
</template>

 

 

3. 컴포넌트에 ref 사용하기

 ref는 자식 컴포넌트에 사용할 수도 있습니다. 이 경우 ref는 컴포넌트 인스턴스를 참조합니다. 참조된 인스턴스는 자식 컴포넌트의 this와 동일합니다. 따라서 자식 컴포넌트를 참조하고 있는 부모 컴포넌트는 자식 컴포넌트의 모든 속성과 메서드에 대한 접근을 할 수 있습니다. 이렇게 하면 부모·자식 간에 밀접하게 결합이 되기 때문에 컴포넌트 참조는 반드시 필요할 때만 사용해야 합니다.

import Child from './Child.vue'

export default {
  components: {
    Child
  },
  mounted() {
    // this.$refs.child는 <Child />의 인스턴스를 가집니다.
  }
}

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

 

 만약 인스턴스에 대한 접근을 제한하고 싶다면 expoese 옵션을 사용할 수 있습니다.

export default {
  expose: ['publicData', 'publicMethod'], // publicData, pulibcMethod에만 접근 가능
  data() {
    return {
      publicData: 'foo',
      privateData: 'bar'
    }
  },
  methods: {
    publicMethod() {
      /* ... */
    },
    privateMethod() {
      /* ... */
    }
  }
}