[Vue.js] vue에서 refs를 사용하여 직접 접근하기

16 Jul 2019 front

vue refs사용하기

  • 다른 component 인스턴스에 직접 접근하려고 한다.

간단하게 사용하기

main.js

new Vue({
    el: '#app',
    components: { 'my-component': myComponent }
});

template

<my-component ref="tempCompent"></my-component>

my-component 내부 method

new Vue({
    method: {
        call() {
            alert('child component alert!!');
        }
    }
});

js 에서 사용하기

this.$refs.tempCompent.call();

Dynamic ref name으로 접근하기

  • es5 
    this.$refs['temp_ref_'+index];
  • es6 
    this.$refs[`temp_ref_${index}`];

template이 변경되었음에도 $refs가 변경 안됨.

  • $refs의 경우 랜더링 이후에 값이 추가된다.
  • 또한 reactive 하지 않기 때문에 watch나 computed가 데이터 변경을 감지하지 못합니다.
  • 감지하기 위해서는 잠시 시간을 기달렸다가 하면 됩니다.
this.$nextTick(() => {
});

결론

  • Vue 목적과 맞지 않으므로, 이런 방식보다 더 좋은 방식을 찾아보자!

참고링크

  • https://stackoverflow.com/questions/33682651/call-a-vue-js-component-method-from-outside-the-component
  • https://stackoverflow.com/questions/48454317/getting-dynamic-refs-value-in-vue-js-2

Related Posts