Component
-
Vue.js - 하위 컴포넌트에서 상위 컴포넌트 통신 ($emit)IT/Vue.js 2020. 7. 24. 11:09
전에 포스팅들은 부모에서 자식으로 데이터를 전달하는 것을 알아봤습니다. 때로는 하위 컴포넌트에서 상위 컴포넌트로 데이터를 보내거나 메소드를 호출하기도 합니다. 하위 컴포넌트로 상위 컴포넌트의 이벤트를 발생하여 메소드를 호출해보도록 하겠습니다. 이벤트 발생과 수신은 emit과v−on속성을사용합니다.1.이벤트발생코드형식하위컴포넌트의메소드에아래와같이코드를작성합니다.//하위컴포넌트의내용this.emit('이벤트 명'); 그리고 나서 해당 이벤트를 수신하기 위해 상위 컴포넌트의 HTML을 아래와 같이 구현합니다. 그럼 예시로 구현을 해보겠습니다. 2. 하위 컴포넌트 작성 (ChildEmit.vue) 하위 컴포넌트는 'Emit 클릭 !' 이라는 버튼을 클릭하면 sendEven..
-
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로 데이터를..
-
Vue.js - 전역/지역 컴포넌트 개념 및 생성IT/Vue.js 2020. 7. 20. 14:47
1. 컴포넌트(Component)의 개념 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화하는 데 도움이 됩니다. 상위 수준에서 컴포넌트는 Vue의 컴파일러에 의해 동작이 추가된 사용자 지정 엘리먼트입니다. 경우에 따라 특별한 is 속성으로 확장된 원시 HTML 엘리먼트로 나타날 수도 있습니다. Vue 컴포넌트는 Vue 인스턴스이기도 합니다. 그러므로 모든 옵션 객체를 사용할 수 있습니다. (루트에만 사용하는 옵션은 제외) 그리고 같은 라이프사이클 훅을 사용할 수 있습니다. 위와 같이 Vue.js 공식 홈페이지에는 알려주고 있습니다. 저는 이 그림을 보면서 이해하기가 쉬웠습니다. 위 그림과 같이 하나의 화면을 적절하게 분리하여 (화면 또는 기능) 블록화 하며 여기서 하나하나의 블록이 컴포넌트..