Props : 부모 컴포넌트가 갖고 있는 데이터를 자식 컴포넌트가 필요할 때 props로 데이터를 전송한다.

1. 데이터를 전송해준다.
   

ex) <자식 :데이터="데이터">

2. 자식은 받은 props를 등록한다.
   
   props: {데이터이름 : 자료형이름}
   자료형이름에는 Array, Object, String, Number ... 자료형 이름을 쓴다.
   틀려도 상관은 없지만 안틀리는게 좋음.

3. 쓴다.

!!props 사용시 주의사항

에러는 모달창열렸니 props에서 수정하고 재할당 해서 나타나는 문제.
props는 read-only이고 받아온거 수정하면 큰일남

Q. 그냥 자식 컴포넌트에서 데이터를 만들어서 사용해도 되잖아요?

• 되지만, 부모 컴포넌트에서도 사용하는 데이터라면 부모컴포넌트에서 만든 후 props 쓰셈

---

오브젝트를 props 할 때

하단에 있는 데이터인 오브젝트.name, 오브젝트.age 각각 props로 전송하기 위한 방법임.

v:bind 문법으로 오브젝트 전체 보내주는게 정석임!

---

결론

• 부모 데이터를 자식이 쓰고 싶을 떈 props를 쓴다.
• 컴포넌트를 만들면 props를 사용해야해서 컴포넌트는 꼭 필요한 곳에서 사용한다.

---

Custom Event

• 자식 컴포넌트가 부모가 가진 데이터를 바꿔야 할 때 사용함.
  -> 데이터를 수정해달라는 메세지임.

1. 보내는 법
   

$"어쩌구" 는 Vue만의 특별한 변수다.
작명은 마음대로 지정할 수 있다.
오른쪽에 데이터를 보낼 수 있다. 안보내고 싶을 땐 빼도 됨.

2. 수신
   

-> 자식이 openModal 이름의 메세지 보내면 자바스크립트 실행해주는 것인데,
부모가 메세지를 수신할 땐 @작명한거 = "" 기억할 것.
"" 오른쪽에는 자바스크립트 써주면 됨.

0. 그 이외 - 자식이 보낸 데이터를 부모가 받는 법

'openModal' 의 이름의 메세지를 보내면 원룸.id(Number)를 보냄.

누른거 = $event -> 자식 컴포넌트에서 0,1,2 를 보내면 $event = 0,1,2 가 됨.

---

결론

• 자식 컴포넌트가 부모 컴포넌트에 있는 데이터를 바꿔고 싶으면
  custom event 문법 활용하면 된다.
  자식 : $emit(작명, 전달할 자료)
  부모 : <자식컴포넌트 @작명="부탁받으면할일"

---

함수 만들고 싶을 때

기존

함수 사용