[Vue.js] 자식요소에서 부모요소 Method 호출하기

부모 요소에서 자식 요소 Method 사용하기

1. 상위 클래스에서 하위 컴포넌트에 v-on (@) 을 사용해 이벤트를 만든다.

<template>
<div>
  ....중략
        <div v-for="(course, idx) in wishCourse.courseList" v-bind:key="idx">
          <div>
            <CourseCard
              @refresh-wish-course="getWishCourse"
              :isWish="true"
              :title="course.courseFlagName"
              :name="course.courseName"
              ...
            />
          </div>
        </div>
  ....중략
</template>

@refreshWishCourse="getWishCourse"

에서 refreshWishCourse는 this.$emit으로 하위 컴포넌트에서 사용할 이벤트 이름이 된다
그리고 getWishCourse는 상위 컴포넌트에 선언된 메소드 이름이다.

2. 하위 컴포넌트에서 this.$emit을 사용한다. 이 구문이 실행되면 상위컴포넌트로 올라가 v-on 이벤트가 실행된다.

this.$emit("refresh-recent-course", this.userId);