인프런 커뮤니티 질문&답변
작성한 질문수
router-view에 대해...
작성
·
838
1
부모 컴포넌트
<templete>
<router-view/>
</templete>
하위 컴포넌트
<templete>
<sub-content :props="props"/>
<router-view :props="props"/>
</templete>
하위 컴포넌트에서 <sub-content/> 컴포넌트를 제외한 부분은
라우팅에 따라 다르게 보여져야 할 것 같아서, 부모에도 <router-view/> 태그를 사용했고
하위 컴포넌트에도 <router-view/> 태그를 사용했는데요,
이렇게 구조를 짜니까 sub-content에는 props가 넘어가는데
하위 컴포넌트의 <router-view/>로 보내는props가 증발해버리더군요.
이럴 경우에는 아무리 <sub-content/>가 하위 페이지마다 반복해서 들어간다 할지라도
하위에서 <router-view>를 쓰지 않고,
하위 컴포넌트에 일일이 <sub-content/>가 들어있는 컴포넌트를 따로 만들어야 되는건지... 궁금합니다.
아무래도 부모에 정의된 router-view 와
하위에 정의된 router-view를 구분하지 못하고 props가 무시되는 거 아닐까 싶은데... 맞나요?
답변 1
1
안녕하세요 재밌는 질문이네요, 라우터 뷰도 하나의 컴포넌트이기 때문에 props로 내려서 사용하실 수 있습니다. 다만, 라우터 뷰에서 받은 프롭스를 또 접근해서 다시 다른 라우터 뷰로 내려주는 건 일반적인 방식이 아니라 아마 인스턴스의 값을 직접 접근해서 해야 할 것 같아요. 라우터 뷰가 컴포넌트로 되어 있다고 해서 이걸 일반적인 props를 내려주는 컴포넌트로 활용하는 것은 목적에 맞지 않은 것 같아요 :)
아 역시 질문하길 잘했네요. 덕분에 명쾌해졌습니다. 정말 감사드립니다.
다른 대안으로는
<sub-content :props="props"/>
<comp1 v-if="라우터 1" :props="props"/> <!--프롭스를 보내고 싶은 컴포넌트-->
<comp2 v-else-if="라우터 2"/>
위와 같이 v-if-else로 처리하는 방법과
뷰 1
<sub-content/>
<comp1/>
뷰 2
<sub-content/>
<comp2/>
이렇게 하위 컴포넌트에서 중복되는 컴포넌트를 개별적으로 일일이 작성하는 방법
둘 중 한가지를 생각해보고 있네요..
실은 vuex 모듈을 만들어서 state 혹은 getters를 불러오고 싶었는데
router-view 중복 때문인지 vuex가 초기화되서 props를 생각하다 이렇게 꼬여버린 것 같습니다..
router-view가 아닌 개별 컴포넌트로 작성하면 그냥 해결 되지 않을까 싶은데
어떻게 생각하실지 궁금합니다.
수업때는 그냥 따라했는데 막상 뭐 하나 진심으로(?) 만들어보려니까 컴포넌트 정리가 쉽지가 않은 것 같네요..;