[Vue.js] 상위 컴포넌트의 함수 실행

 

매번 기억은 하는데 쓰려고 하면 잊어버린다.

​

 

부모 컴포넌트

<child-component  v-on:addCheckCode="getCheckedCode"></child-component>

부모 컴포넌트에서는 이렇게 작성을 해준다.

getCheckedCode 는 부모 컴포넌트의 함수이고 addCheckCode는 자식컴포넌트에서 올라오는 값이다.

 

 

자식 컴포넌트

newlyCheckedBox(code){
    this.$emit('addCheckCode', code)
},

자식 컴포넌트에서 부모컴포넌트에 써준 '이벤트명'을 넣어준다.

여기서는 $emit 을 사용해야 한다.

같이 전달해야 하는 값이 있어서 옆에 code 를 작성해주었다.