부모-자식 간 통신을 하고 싶은데 어떻게 해야 할까요?

JavaScript Vue.js
1

현재 부모 vue에서 자식 component를 불러오고 있습니다.

부모는 전체 레이아웃이고, 자식은 그 레이아웃 안에 있는 카드입니다.

카드의 맨 밑으로 스크롤을 하게 되면 카드가 추가되도록 하고 싶은데, 어떻게 해야 할지 모르겠네요.

현재 해 놓은 건, 부모에서 전체 데이터를 불러오고 자식 컴포넌트를 호출할 때 그 안에 데이터들을 집어넣어 호출 후 자식에서 for을 돌려 자식에 있는 scroll bottom event로 for limit을 바꿔 카드를 늘렸습니다.

제가 바꾸고자 하는 건, 부모에서 전체 데이터를 불러오는 게 아닌 스크롤이 내려갈때마다 특정 범위만을 불러오고 싶습니다. 이렇게 하려면 자식에 있는 event가 활성화됐을 때 그 limit을 부모에 emit하고, 부모가 on하면 그 limit으로 다시 데이터를 읽어들여서 자식한테 보내줘야 하는데, 이렇게 하는 게 맞나요?

다르게 하고자 플러그인도 생각해 보았는데, 아이디어가 마땅히 떠오르지가 않네요 ㅜㅜ

2

일단 카드를 불러오는 API 가 페이징 처리가 가능한가요? 카드 정보를 요청할때, 1번째, 2번째 순차적으로 불러올 수만 있다면 부모 컴포넌트에 data로 카드리스트를 배열로 가지고 있고, 카드 컴포넌트를 data 에 들어 있는 리스트를 기반으로 v-for로 loop 를 돌려 놓으시면 됩니다.

그리고 스크롤이 특정 영역에 들어왔을때, 다음 카드의 정보를 요청 하는 API를 호출 하고 기존 data의 리스트에 push나 concat 해주는 식으로 하시면 됩니다.

개인적으로 근래에 말씀하시는 부분과 비슷한 로직을 구현할 일이 많았는데 vue-infinite-scroll 를 사용하여 구현 하였습니다.