vue.js에서 json파일을 읽어오는 방법

Posted by negabaro kim on Wednesday, July 22, 2020 Tags: vue.js   1 minute read

송신(emit)

특정 범위를 이벤트로 부모에게 전달할때 사용

컴퍼넌트간 통신시 공통의 부모를 경유해 통신을 하므로 이 emit을 자주 사용한다.

http통신의 request와 역할이 비슷

통신 방법

공통의 부모에게 가상의 event를 생성해 해당 event를 경유해서 통신한다.

즉 공통의 부모를 가지 않으면 통신이 불가능(물론 부모 자식간의 통신은 가능)

  C   D
A   B

A와B 컴퍼넌트간 통신을 하고 싶을때 공통의 C라는 부모 컴퍼넌트를 가지고 있으므로 통신이 가능하나

A,D는 공통의 부모 컴퍼넌트가 없으므로 통신이 불가능

부모 자식관계인 A,C A,B도 통신가능

수신($on, v-on, @)

위에서 설명한 emit을 이용해 만들어진 가상 이벤트(?)를 가져오기 위해서는 해당 이벤트를 수신하고 있어야한다. 수신을 하기위한 문법으로 $on,v-on,@등 이 있다.

부모 컴퍼넌트에 emit으로 만들어진 가상 이벤트(?)가 있는지 확인하고 있으면 이벤트(메소드)를 가져와 이벤트에 넘겨진 값이 있다면 그것을 받아서 binding 시켜주는식으로 통신을 한다.

emit과 같이 부모 컴퍼넌트를 경유한다는것이 포인트이다.

http통신의 response와 비슷한 역할을 한다.

수신하는 방법에는 $on,v-on,@등 이 있는데 이들에 대해 각각 아래에서 설명하겠다.

emit -> this.$parent.$on

고양이(Cat)가 새끼고양이에

emit -> v-on:xx=”yy”

emit -> @:xx=”yy”