프롭스2 뷰 컴포넌트 통신 컴포넌트 통신 컴포넌트는 상하위로 관계가 생긴다. 컴포넌트는 각자 고유한 유효 범위를 가지고 데이터도 각각 가지고 있다. 이 데이터를 공유하려면 props와 event 속성을 사용하면 된다. 부모는 자식에게 props(데이터) 속성을 전달하고, 자식은 부모에게 evnet를 전달한다. 왜 부모-자식으로 통신 영역을 제한하는가? 각 컴포넌트가 마음대로 데이터를 주고 받는다면 에러 발생시에 추적하기 어렵게 된다. 뷰는 데이터가 아래로만 내려간다. 이 규칙은 데이터를 흐름을 추적할 수 있게 해준다. 2023. 8. 22. Props Props 프롭스 Properties의 약자로 부모컴포넌트로부터 자식컴포넌트가 데이터를 받기 위해 사용하는 속성이다. 자식컴포넌트에 props:[프롭스이름]을 정의하고, 가져올 상위 컴포넌트 '데이터이름을' 매칭한다. v-bind:프롭스속성이름="상위컴포넌트데이터이름" 로 데이터를 불러오고 {{ 프롭스이름 }}으로 데이터 사용 var appHeader = { template: '{{ propsdata }}', // 프롭스 이름으로 데이터 사용 props: ['propsdata'] // 하위 컴포넌트 프롭스 이름 정의 } new Vue({ el: '#app', components: { 'app-header': appHeader }, data: { message: 'hi' // 상위 컴포넌트 데이터 } }).. 2022. 11. 13. 이전 1 다음 반응형