'ref'속성의 실제 목적은 무엇입니까?

'ref'속성의 실제 목적은 무엇입니까?

---

입력 요소의 "ref"속성과 정말 헷갈립니다. 내 지식으로 들어 본 적이없고 의미있는 자료를 찾을 수 없습니다. 코드는 vue.js 공식 문서에 있습니다.

<currency-input v-model="price"></currency-input>

다음은 구성 요소에 대한 코드입니다.

Vue.component('currency-input', {
  template: `
    <span>
      $
      <input
        ref="input"
        v-bind:value="value"
        v-on:input="updateValue($event.target.value)">
    </span>
  `,
  props: ['value'],

입력과 동일한 ref 속성 값의 의미는 무엇입니까?

---

ref 속성의 주요 목적은 상위 $refs속성 의 키가되어 DOM 요소를 선택할 수 있도록하는 것입니다.

예를 들어 입력 요소가 ref="input"있는는 부모 (여기서는 currency-input 내부 this)에 this.$refs["input"](또는 this.$refs.input) 로 DOM 노드를 노출합니다 .

참조 : https://vuejs.org/v2/api/#ref

DOM을 직접 조작하지 않는 것이 가능할 때 더 나은 경우에도 여러 사용 사례가 있습니다. 예를 들어, 여기서 합법적 인 사용 사례는이 입력에 초점을 맞추는 것입니다. 왜냐하면 this.$refs["input"].focus()컴포넌트의 메소드에서 사용할 수 있기 때문입니다 .

---

• $refs HTML 요소를 선택 / 타겟팅하는 데 사용됩니다.
• $refs등이다 document.querySelector('.el')바닐라 JS 또는 $('.el')jQuery를에
• $refs VueJS 인스턴스 내부 또는 외부에서 액세스 할 수 있습니다.
• $refs있는 반응성 NOT 데이터 속성과는 달리.

따라서 $refs충돌을 피하기 위해 Vue 인스턴스 속성에 연결 / 제어되지 않는 요소의 값을 수신 / 조작 / 변경하려는 경우 사용하는 것이 좋습니다 .

참조 URL : https://stackoverflow.com/questions/44063606/whats-the-real-purpose-of-ref-attribute