Vue) 자식 -> 부모 컴포넌트에 데이터 넘기기. 부모 컴포넌트에 파라미터 넘기기 emit 사용 방법

자식 컴포넌트에서 부모 컴포넌트에게 데이터를 넘기고자 한다. 

 

부모 컴포넌트의 함수를실행시키는 방법과, 파라미터 여러 개는 어떻게 넘기는지 알아보자. 

 

 

 구조 

/* 부모 컴포넌트 */
<div>
  <TestComponent @setData="testFunc" />
</div>

export default {

  ...(생략)...

  ,methods: {
    testFunc(파라미터1, 파라미터2) {
      console.log("자식에서 실행명령받음!")
    }
  }
}

// 자식 컴포넌트
<span @click="changeNum()">

export default {

  ...(생략)...

  ,methods: {
    changeNum() {
      this.$emit('setDate', 파라미터1, 파라미터2); 
    }
  }
}

 

 

 

 파라미터 넘기기 

 

부모 컴포넌트에서 자식컴포넌트 태그에 @함수명A = "함수명B" 를 입력한다. 

ex) <TestComponent @setData="testFunc" />

 

여기서 '함수명A' 는 자식의 호출을 알아차리기 위한 이름이고.

'함수명B' 는 자식의 호출을 받아 실행할 부모의 함수다. 

 

즉, 자식이 "함수명A ~!" 라고 부모를 부르면 부모는 "알았어~ B 할게!" 라고 대답하는 느낌이다. 

 

 

자식이 부모를 부를때는 emit으로 부른다. 

this.$emit("함수명A", 파라미터1, 파라미터2);

 

파라미터는 주고싶음 만큼 쉼표(,)로 계속 이어나가면된다. 

 

그러면 받는 부모입장에서는 파라미터를 받으면된다. 

// 자식이 부모 호출
this.$emit('setDate', 파라미터1, 파라미터2); 


// 부모가 호출을 듣고 함수 실행
testFuc(파라미터1, 파라미터2) {

}