router-view에 대해...
899
작성한 질문수 6
부모 컴포넌트
<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를 내려주는 컴포넌트로 활용하는 것은 목적에 맞지 않은 것 같아요 :)
0
아 역시 질문하길 잘했네요. 덕분에 명쾌해졌습니다. 정말 감사드립니다.
다른 대안으로는
<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가 아닌 개별 컴포넌트로 작성하면 그냥 해결 되지 않을까 싶은데
어떻게 생각하실지 궁금합니다.
수업때는 그냥 따라했는데 막상 뭐 하나 진심으로(?) 만들어보려니까 컴포넌트 정리가 쉽지가 않은 것 같네요..;
Chrome 개발자 모드 확장이 안됨
0
262
1
깃 권한 요청드립니다
0
118
1
vue.js 중급 리포지토리 권한 관련
0
118
1
vuex + axios 질문 있습니다!
1
198
2
깃 권한 요청드립니다!
0
161
1
강의 깃주소 문의
0
144
1
router-view에 props를 어떻게 넘길 수 있나요?
1
280
2
Vue가 인식되지 않는 현상
0
206
1
기초강좌는 어디있나요?
1
190
2
App.vue가 필요한 이유
0
192
1
getter가 정의되어 있지 않아 오류가 발생합니다.
1
254
1
뷰 라이프사이클
1
187
1
TSLint 말고 TSLint Vue 설치해도 되나요?
1
368
3
로컬 스토리지는 어디에 있나요?
1
280
1
vuex 실행시 새로고침해야지만 리스트에 나타나는 현상
1
387
2
export default 관련한 질문
0
354
2
깃허브 vue-todo 접근불가에 따른 확인요청
1
354
2
깃허브에 문제있는것 같습니다.
1
273
2
인프런 강의 재생 화면 구성 변경 문의드립니다
1
305
2
addTodo Helper 함수 적용
1
243
1
vuex 헬퍼 전역 설정
1
246
2
github 권한요청드립니다.
1
258
2
이벤트 위치에 대한 궁금증 입니다.
1
223
2
구조 차이에 대한 문의
1
345
2