(에러핸들링) vue 부모 - 자식 컴포넌트간 props 전달과 리렌더링 방법

1. 에러 내용

Tab 의 idex를 props로 App.vue에 전달하여  다시 하위 컴포넌트로 전달해 준 후 

index 값에 의존하는 컴포넌트를 리렌더링해야 하는 상황

 

2. 장애 요소

• Vue 라이브러리에서 리렌더링 하는 조건이 React에 비해 까다로운 점
• 리렌더링하는  다양한 메소드(created(), mounted(), watch 등)와 선언된 변수의 값의 변화에 따른 리렌더링 조건 검토 어려움
• index값에 의존하는 컴포넌트별로 최적의 방법 모색이 어려움

 

3. 미완의 핸들링

App.vue의 자식 컴포넌트인 TestTab 컴포넌트를 만들어

Tab index의 변화에 따른 값의 변화가 가능한지 여부만 구현해 보았음

 

App.vue

/* TestTab 컴포넌트에 ref = "child_component" 지정 */
<template>
  <main>
    <section class="wrap">
      <TabSection @tabIndex="setTabIndex" />
      <TestTab ref="child_component"/>
    </section>
  </main>
</template>

/* export defaut의 methed 객체에 this.$refs.child_component 사용 */
export default {
  name: "App",
  components: {
    TabSection,
    TestTab,
  },

  data() {
     ...
  },
  methods: {
    setTabIndex(tabIndex) {
      this.tabIndex = tabIndex; // tabIndex 0 = '모두', 1 = '본인', 2 = '회사'
      this.$refs.child_component.tabIdx = tabIndex;
    }
  },

 

components/TestTab.vue

<template>
  <div id="test">
    {{tabIdx}}
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tabIdx: '',
        default: 0
      }
    }
  }
</script>

4. 처리 화면