728x90 vue props2 [Vue.js] 뷰 컴포넌트간 양방향 데이터 바인딩 [Vue.js] 뷰 자식 컴포넌트와 부모컴포넌트 데이터 양방향 바인딩 ⭐️ 학습 목표 props를 통해 부모-> 자식 컴포넌트로 데이터를 전달했다면 자식 컴포넌트에서 이벤트 발생시 부모 컴포넌트로 데이터를 다시 바인딩 해야하는 경우도 있는데 아래 예제를 통해 이를 학습해보도록 하자 ⭐️ 기본 형태 부모에게 데이터 전송! ⭐️ 샘플 예제 (로직) 메뉴와 상품 리스트가 나오는 예제인데 부모 컴포넌트는 App, 자식 컴포넌트는 Menu, Product,Modal이다 자식 컴포넌트 내 상품 제목을 클릭하면 모달창이 출력되고 닫기 버튼을 클릭시 모달창이 종료되는 로직인데 자식 컴포넌트인 상품 컴포넌트에서 제목 클릭 이벤트 발생시 상품의 고유번호와 모달창 닫힘 상태를 부모 컴포넌트로 전달하고 부모 컴포넌트에서 해당.. 2021. 8. 14. [Vue.js] 뷰 props 사용 방법 [Vue.js] 뷰 props 사용 방법 ⭐️ props 란 ? 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할때 사용되어지는 단방향 데이터 전달 방식이다 ⭐️ 사용 방법 부모 컴포넌트에서 자식 컴포넌트를 호출시 자식 컴포넌트 태그 내 v-bind나 : 키워드를통해 데이터를 전달하고 자식 컴포넌트에서 props객체를 통해 데이터를 전달받는 방식이다 ⭐️ 기본 형태 ⭐️ 샘플예제 (로직) 쇼핑몰 상품 리스트가 출력되는 예제를 만들어 보았다. App은 부모 컴포넌트, Menu와 Product는 자식 컴포넌트이고 각 자식 컴포넌트는 props를 통하여 해당하는 데이터를 전달 받아 출력하는 형식이다 ⭐️ App 컴포넌트 (부모컴포넌트) ⭐️ Menu 컴포넌트 (자식 컴포넌트 - 메뉴) {{item}} ⭐️ P.. 2021. 8. 14. 이전 1 다음 728x90
