v-on2 component props, emit 와 같은 구조로 작성하고 app에 Vue 인스턴스르 붙이면 컴포넌트간의 구조는 어떻게 될까? 여기선 app에 붙인 컴포넌트가 my-comp보다 상위 컴포넌트가 된다. 따라서, app에 붙은 컴포넌트를 vm이라고 하면 vm은 my-comp에게 props를 통해 데이터를 전달할 수 있다. 반대로 my-comp는 vm에게 데이터를 어떻게 전달할까? 답은 emit을 사용해서 전달한다. 데이터를 전달하는 것은 아니고 이벤트를 전달하게 된다. 아래 코드의 구조를 보면 my-comp를 만들 때 my-msg props에 vm의 message 값을 넘겨주기 위해서 :my-msg="message"를 사용했다. 반대로 my-comp에서 클릭을 발생했을 때 이벤트를 vm으로 넘겨주기 위해서 my-comp methods에 up.. 2020. 7. 9. v-bind , v-on 약어 Vue의 데이터를 사용한다는 디렉티브인 v-bind와 이벤트를 감지하고 트리거 시키는 v-on은 자주 사용된다. 따라서, 약어가 있다. v-bind: 는 v-bind를 생략한 : v-on: 은 @를 사용하면 된다. 아래 예제를 통해 v-bind, v-on의 약어를 비교해보자. html 코드에서 같은 내용이 두개 있는데 표현만 약어로 바뀐 것이다. 2020. 7. 8. 이전 1 다음
