Vue.js refs로 자식컴포넌트, html 엘리먼트 접근

refs

• 자식컴포넌트나 일반적인 html 엘리먼트에 직접 접근 가능(getElimentById, querySelector 등 과 유사)
• 컴포넌트가 랜더링이 된 이후 적용되기 때문에 반응형으로 구성하기 위한 computed, template 에서 사용 제약
• ref 속성과 $refs 키워드를 통해서 사용

 

 

<!-- "ref"를 통해 사용할 식별자 정의(id와 같은 역할) -->
<ChildComponent ref="child_component" />
<input type="text" ref="test_input" />
...
// $refs를 사용해서 접근
this.$refs.child_component
this.$refs.test_input

 

자식 컴포넌트 샘플 코드

테스트용 자식 컴포넌트 코드를 간단하게 작성한다

<template>
  <div>
    <p>
      <button type="button" @click="childBtnFunc" ref="child_btn">
        Child 클릭 이벤트 버튼
      </button>
    </p>
    <p>{{ msg }}</p>
  </div>
</template>
<script>
export default {
  name: "ChildComponent",
  data() {
    return {
      msg: "Child Message",
    };
  },
  methods: {
    childBtnFunc() {
      console.log("Child 버튼 클릭 이벤트 호출");
    },
    childFunc() {
      console.log("Child 함수 호출");
    },
    changeData() {
      this.msg = "Child 데이터 변경!!";
    },
  },
};
</script>

 

부모 컴포넌트 샘플 코드

부모컴포넌트가 mounted 되었을 때 간단히 엘리먼트 정보를 콘솔로 한번 조회하고, input 엘리먼트에 focus를 준다. 그리고 "테스트" 버튼을 클릭했을 경우 자식컴포넌트의 메소드,데이터 등에 접근하는 코드이다.

<template>
  <div>
    <ChildComponent ref="child_component" />
    <hr />

    <button type="button" @click="callChild">테스트</button>
    <p>
      <input type="text" ref="test_input" />
    </p>
  </div>
</template>
<script>
import ChildComponent from "./ChildComponent.vue";

export default {
  name: "ParentComponent",
  components: {
    ChildComponent,
  },
  mounted() {
    // 엘리먼트 정보 조회
    console.log(this.$refs.child_component.$el);

    // input엘리먼트 focus
    this.$refs.test_input.focus();
  },
  methods: {
    callChild() {
      // 1. 자식 컴포넌트의 [버튼 클릭 이벤트] 발생
      this.$refs.child_component.$refs.child_btn.click();

      // 2. 자식 컴포넌트의 [메소드] 직접 호출
      this.$refs.child_component.childFunc();

      // 3. 자식 컴포넌트 [데이터 접근]
      console.log(this.$refs.child_component.msg);

      // 4. 자식 컴포넌트 [데이터 변경]
      this.$refs.child_component.msg = "child message changed from parent";
    },
  },
};
</script>

 

테스트 결과 화면

 

 

참고 자료:

https://question0.tistory.com/26