Vue.js 고수 선배님들.. 컴포턴트 문의드립니다

Question

안녕하세요A 페이지(부모)에서 B 컴포넌트(자식)를 이렇게 사용하고 있습니다B 컴포넌트에서 이벤트가 발생하면 A changePage function 아래처럼 실행시켜서 부모 값을 변경합니다$emit('change-page', page); -- 파라미터자식 -> 부모 성공그런데 A페이지에서 size, totalCount값을 직접 변경하는 케이스가 있습니다:page-size&#61;&#34;size&#34;:total-cnt&#61;&#34;totalCont&#34; 를 통해 B컴포넌트 pageSize, totalCnt 값이 변경되서 pagnation이 다시 그려지는 것을 원하지만 그렇게 안되네요B컴포넌트 updated() 도 실행되지 않습니다즉 부모 -> 자식 실패이럴 경우 어떻게 핸들링 해야될까요?B컴포넌트 props를 부모에서 바꾸는 방법 없을까요?

MungGaeDev · Answer

Watch로 Props를 감시하면 됩니다.https://velog.io/@sjc0829/Vue.js-%EB%B3%80%ED%99%94%ED%95%98%EB%8A%94-props-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EA%B0%90%EC%A7%80%EB%A5%BC-%EC%9C%84%ED%95%9C-watch-%EC%82%AC%EC%9A%A9제 블로그는 아니고.. 참고해 보세요

잣댐스키 · Answer

부모에서 변경되면 자식에서 변경된 값을 받아야 할 텐데요..혹시 자식에 data에 props 로 받은값을 매칭하신거라면 mount(라이플 사이클 햇갈려서 create 일 수도...) 시에 data에 매칭되고 이후에는 변경되도 data는 변경 안 될 수 있습니다.(props는 반영됩니다.)이럴경우 computed 로 props 변경에 따라 값을 변경해서 쓰시면 아마 변경감지 될 것이라 생각합니다.

하태연 · Answer

CompositionAPI 사용하시면 이미지와 같이 사용하시면 될 것 같습니다.

에르딘트 · Answer

vue2 에서는 부모에서 값 props 변경하면 자식에서 변경된 값 받을 수 있습니다. 필요하면 watch 쓰고 없으면 안써도 되겠죠.vue3에선 toRefs(props).size 이런 식으로 하면 변경된거 감지할 수 있습니다.수고~ vue3에 size는 멋대로 붙인거니 사용한 걸로 바꿔서 사용해요

Vue.js 고수 선배님들.. 컴포턴트 문의드립니다

4개의 답변

Q&A 목록