Vue - 컴포넌트($emit 자식 -> 부모로 데이터 전달하기)

Vue.js를 공부하면서 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달해야할 경우가 생겼다.

$emit을 통하여 해결하였으며 이를 기록하고자 한다.

 

1. 자식 컴포넌트

- $emit을 사용하여 부모컴포넌트에게 값을 전달한다.

- $emit의 파라미터로는 (어떤이름으로 부모에게 보내줄지, 보내줄 값) 이다.

methods: {
    // 버튼 클릭시 부모 컴포넌트에게 false를 전달하는 함수이다.
    DialogNoBtn () {
      // 파라미턴는 (부모에게 보내줄 이름, 보내줄 값)
      this.$emit('dialog-no-btn', false)
    },
  },

 

2. 부모 컴포넌트

- 자식 컴포넌트에서 보내준 이름을 가져온다.

<NoYesDialog
  // 자식컴포넌트에서 부모로 전달해준것 받아옴 dialogNoBtn method를 통해
  @dialog-no-btn="dialogNoBtn"
/>

- 받아올 method  => dialogNoBtn

methods: {
    // 다이얼로그에서 아니요 버튼 클릭시 다이얼로그 종료
    // 파라미터 (자식컴포넌트에서 보내준 값)
    dialogNoBtn(value) {
      // 자식컴포넌트에서 보내준 값을 부모의 data로 선언한 dialog에 넣어준다.
      this.dialog = value
    },
  }

 

위와같이 $emit을 통하여 부모에게 전달해주면 부모는 그 값을 받아올 수 있다.