[Vue] Component State Flow(2) Component Event

부모 컴포넌트는 자식에게 데이터를 전달할 수 있지만, 반대로는 불가능했다...

그러면 어떻게 소통을 시킬 수 있을까? → 일어난 일(event)는 알릴 수가 있음!

즉, 자식은 자신에게 일어난 일을 부모에게 알리고(Emit Event), 

부모가 prop 데이터를 변경하도록 해야한다

 

# emit( )

자식 컴포넌트가 이벤트를 발생시켜 부모 컴포넌트로 데이터를 전달하는 역할

 

한번 해보자!

첫번째로 자식 컴포넌트에서 버튼을 하나 만들어준다

<button @click="$emit('myEvent')">눌러봐요</button>

 

그다음에 부모 컴포넌트에서 template 부분에 자식 태그에 추가를 해준다

<ParentChild @my-event="myCallback"/>

이벤트를 받았을 때 어떤함수를 실행할건지를 써준다

 

그리고, script에 함수를 정의해준다

const myCallback = function () {
    console.log('와아!')
}

 

마지막으로 서버를 켜서 확인을 해주면

버튼을 눌렀을 때 함수가 실행하는 것을 확인할 수 있다.

 

 

 

좀 더 명시적으로 써보자!

defineEmits() 함수를 이용해서 미리 어떤 이벤트를 쓸건지 선언할 수 있음

→ 이때는 $emit를 쓰지않고 다른 방식으로 쓴다

 

우선 처음엔 자식 컴포넌트에서 버튼을 추가해준다

<button @click="clickEvent">이번엔 다른방법으로</button>

emit를 여기써주지 않고, 그냥 함수처럼 쓴다

이후, 자식 컴포넌트의 script에서 

const emit = defineEmits(['otherEvent'])
const clickEvent = function () {
    emit('otherEvent')
}

다음과 같이 정의해준다.

 

그리고 난 후, 부모 컴포넌트로 가서

<ParentChild @other-event="myEvent"/>

이벤트를 받았을 때 실행할 함수를 정해주고

부모의 script에서 그 함수를 정의해준다

const myEvent = function () {
    console.log('와아')
}

 

한번에 부모와 자식 컴포넌트를 확인하면 다음과 같다

같은 색으로 되어있는 애들끼리 같아야 한다

---

이벤트를 보낼 때 추가 인자를 보낼수도 있음

= 이벤트 인자

자식 컴포넌트에서 다음과 같이 1, 2, 3의 추가 인자를 보내고

<button @click="clickEvent">이벤트인자를 보내보자</button>

const emit = defineEmits(['eventPara1'])
const clickEvent = function () {
    emit('eventPara1', 1, 2, 3)		// 추가인자 1, 2, 3
}

부모 컴포넌트에서 수신할 수 있다

<ParentChild @event-para1="myEvent"/>

const myEvent = function (...args) {	// 받을때 인자 넣어주기
    console.log(args)
}

이때 타입은 array

---

좀 더 해보자

버튼을 클릭하면 이름이 변경하도록 만들어보자

자식 컴포넌트

<button @click="clickEvent">이름을 바꿔줘~!</button>

const emit = defineEmits(['changeName'])
const clickEvent = function () {
    emit('changeName', 'Mino')
}

 

부모 컴포넌트

<ParentChild 
@change-name="myEvent"/>
<p>{{ name }}</p>

import { ref } from 'vue'
const name = ref('Bok')
const myEvent = function (newName) {
    name.value = newName
}

 

클릭 전

클릭 후