Props
-
Vue.js - 컴포넌트 통신 동적 props 사용하기 (Daynamic props)IT/Vue.js 2020. 7. 23. 11:15
Vue를 사용할 때 부모 컴포넌트에 있는 데이터를 자식 컴포넌트에서 필요로 할 때가 있습니다. props 옵션을 사용하면 부모 컴포넌트에 있는 데이터를 자식 컴포넌트로 보낼 수 있습니다. 저번 포스팅에는 정적 porps에 대해서 다루었는데요. https://kshman94.tistory.com/125 Vue.js - 상위에서 하위 컴포넌트 데이터 전달 방법 (props) 컴포넌트간 통신 뷰의 경우는 컴포넌트로 화면을 구성하기 때문에 같은 웹페이지라도 데이터를 공유할 수 없는 경우가 많으며, 각 컴포넌트들의 scope(유효범위)가 독립적이기 때문에 다른 컴포� kshman94.tistory.com 항상 정적인 데이터만 자식에게 넘겨주시는 것이 아니므로, 동적으로 변하는 data를 자식에게 넘겨줘야 할 경우..
-
Vue.js - 상위에서 하위 컴포넌트 데이터 전달 방법 (props)IT/Vue.js 2020. 7. 22. 15:03
컴포넌트간 통신 뷰의 경우는 컴포넌트로 화면을 구성하기 때문에 같은 웹페이지라도 데이터를 공유할 수 없는 경우가 많으며, 각 컴포넌트들의 scope(유효범위)가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수가 없습니다. 상/하위 컴포넌트 관계 상위(Parent) 컴포넌트에서 props라는 속성으로 전달하게 됩니다. props : 상위 컴포넌트에서 하위 컴포넌트로 데이터 전달할 때 사용하는 속성입니다. - 하위 컴포넌트의 속성에 정의 해야 합니다. - 상위 컴포넌트의 HTML 코드에 정의된 child-component 태그에 v-bind 속성을 정의 해야 합니다. 1. 하위 컴포넌트 작성 (ChildAndChild.vue) 상위 컴포넌트의 send 속성을 하위 컴포넌트에 props로 데이터를..