💻 Events

props를 활용하여 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하고 자식 컴포넌트에서는 부모 컴포넌트로 데이터를 전달하거나 또는 트리거의 목적으로 이벤트를 발생 시킬 수 있다. 그리고 이벤트는 컴포넌트의 emit 메서드를 통하여 발생 시킬 수 있다.

상위 컴포넌트에서 하위 컴포넌트로 전달할 때 props로 전달이 가능하다. 그리고 하위 컴포넌트에서 상위 컴포넌트로 이벤트를 올릴 때는 emit을 활용하여 올릴 수 있다.

템플릿 안에서 사용할 때 컴포넌트 인스턴스의 메서드인 $emit을 사용하였고

<template>
  <button @click="$emit('someEvent')">버튼</button>
</template>

그러면 부모 컴포넌트에서 v-on(또는 @)을 사용하여 이벤트를 수신할 수 있다.

<MyComponent @some-event="callFunction">

.once 수식어는 컴포넌트 커스텀 이벤트에서도 지원됩니다.

<MyComponent @some-event.once="callFunction">

이벤트와 함께 특정 값을 내보낼 수 있다. $emit함수 이벤트명에 추가로 파라미터를 넘길 수 있다.

<template>
  <button @click="$emit('someEvent', 'Hello', 'Hi', '~')">버튼</button>
</template>

그런다음 부모 컴포넌트에서 이벤트와 함께 파라미터를 받을 수 있다.

<template>
	<MyComponent @some-event="callFunction" />
</template>

<script setup>
  export default{
  	setup(){
  		const callFunction = (word1, word2, word3) => {
  			alert(word1, word2, word3);
  		};
  		return {
  			callFinction
  		}
  	}
  }
</script>

이벤트 선언하기

emits 옵션을 사용하여 이벤트를 선언할 수 있다. 이때 이벤트 선언하는 방법은 두가지 형식으로 선언할 수 있다.

• 문자열 배열 선언
• 객체문법 선언

그리고 JavaScript 코드에서 이벤트를 내보낼 때는 setup() 함수의 파라미터로 넘어온 context.emit()메서드를 사용할 수 있다.

문자열 배열 선언

<script>
	export default{
  		emits: ['someEvent'],
  		setup(props, context){
  			context.emit('someEvent', 'Hello World!')
  		}
  	}
</script>

<script>
	export default{
  		emits: ['someEvent'],
  		setup(props, { emit }){
  			emit('someEvent', 'Hello World!')
  		}
  	}
</script>

객체문법 선언 (유효성 검사가 필요할 때)

• 객체문법으로 선언할 경우 validation로직을 추가할 수 있다. 만약 validation이 없다면 null로 설정하면 된다.

<script>
	export default{
  		emits: {
  			//유효성 검사가 없는 이벤트 선언
  			someEvent: null,
  
  			//유효성 검사가 있는 이벤트 선언
  			someSubmit: (result) => {
  				if (email && password) {
  					return true
  				} else {
  					console.warn('result 값이 비어있습니다!')
  					return false
  				}
  
  			}
  		},
  		setup(props, context){
  			context.emit('someEvent', 'Hello World!')
  		}
  	}
</script>

선택 사항이지만 컴포넌트가 작동하는 방식을 더 잘 문서화하기 위해 모든 이벤트를 정의하는 것이 좋다. 또한 Vue가 fallthrough속성에서 알려진 리스너를 제외할 수 있다.

v-model 만들기

컴포넌트를 만든 후 해당 컴포넌트에 v-model을 적용하려면 @update:modelValue이벤트를 사용하여 v-model을 만들 수 있다. 일반적으로 기본 HTML 요소인 <input> 태그에 v-model은 아래와 같이 사용한다.

<input v-model="username">

위에 선언된 v-model은 아래와 같이 동작한다.

<input :value="username" @input="username = $event.target.value">

위에 기본 동작 대신 우리가 만든 컴포넌트는 아래와 같이 수행한다.

<LabelInput :modelValue="username" @update:modelValue="newValue => username = newValue">
<!-- props로는 :modelValue 이벤트로는 @update:modelValue를 구현하면 된다.-->

이 <LabelInput>을 실제로 동작하게 하려면 아래와 같이 컴포넌트를 정의해야한다.

• modelValue props를 :value속성에 바인딩
• @input 이벤트에서 새 @update:modelValue 이벤트로 내보낸다.

<template>
  <label>
    {{ label }}
    <input type="text" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
  </label>
</template>

<script>
	export default{
  		props: ['modelValue', 'label'],
  		emits: ['update:modelValue'],
  	};
</script>

그리고 아래와 같이 우리가 만든 컴포넌트에 v-model을 적용할 수 있다.

<LabelInput label="이름" v-model="username">

Computed 이용하기

• 컴포넌트 안에서 computed를 사용하여 v-model을 구현할 수 있다.

<template>
  <label>
    {{ label }}
    <input type="text" :value="value">
  </label>
</template>

<script>
  	import { computed } from 'vue';
  
	export default{
  		props: ['modelValue', 'label'],
  		emits: ['update:modelValue'],
  		setup(props, context){
  			const value = computed({
  				get() {
  					return props.modelValue;
  				},
  				set() {
  					contex.emit('update:modelValue', value);
  				},
  			});
  			return { value };
  		}
  	};
</script>

전달 할 수 있다. 이럴때 emit를 사용할 수 있다.

v-model 전달인자

• 기본적으로 v-model은 컴포넌트에서 modelValue props와 update:modelValue이벤트로 사용한다. 하지만 전달인자(Arguments)를 사용하여 이러한 이름을 수정할 수 있다.

<BookComponent v-model:title="bookTitle">

이 경우 자식 컴포넌트에서는 :title을 속성으로 정의하고 update:title로 이벤트를 내보내야 한다.

<template>
  <article>
    <strong>책 이름</strong> :
    <input type="text" :value="title" @input="$emit('update:title', $event.target.calue)" >
  </article>
</template>

<script>
	export default {
  		props: ['title'],
  		emits: ['update: title'],
  	}
</script>