Vue.js - #6 데이터 흐름(상-하, 하-상, 동일), 이벤트 버스(Event Bus)
뷰에서는 상위에서 하위로의 데이터 흐름(단방향 데이터 흐름)을 규약으로 지키며 구현한다. 먼저, 1) 상위에서 하위로 데이터를 보낼 때 props 속성을 사용하여 상위 컴포넌트에서 하위 컴포넌트로 보낸다. 먼저, 하위 컴포넌트에 속성에 props 속성을 정의하고, Vue.component('child-component', { props : ['props 속성 이름'] }); 상위 컴포넌트의 HTML 코드에 등록된 child-component 태그에 v-bind 속성을 추가한다. v-bind 속성의 왼쪽 값으로 하위 컴포넌트에서 정의한 props 속성을 넣고, 오른쪽 값으로 하위 컴포넌트에 전달할 상위 컴포넌트의 data 속성을 지정한다. 예제로, Vue.component('child-component',..
2021. 10. 24.