Events

이벤트 발생 밑 수신

• 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달하거나 트리거의 목적으로 이벤트를 내보내는 것
• emit 메서드를 통하여 발생
• 자식 컴포넌트 <template> 블록 안에서 내장 함수 $emit()을 사용하여 이벤트를 내보냄
• 부모 컴포넌트에서 v-on or @을 통하여 이벤트를 받음

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

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

이벤트 매개변수

• $emit(이벤트,...매개변수들)에 추가로 파라미터를 넘길 수 있다.

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

이벤트 선언

• vue3에서는 emit옵션을 사용하여 이벤트를 선언(문자열 배열로 선언 , 객체문법으로 선언)
• 자바스크립트 코드에서 이벤트를 내볼낼 때는 setup() 함수의 파라미터로 넘어온 context.emit() 메서드를 사용

문자열 배열 선언

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

객체 문법 선언

• validation 로직 추가 가능

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!')
  }
}

v-model만들기

컴포넌트를 만든 후 해당 컴포넌트에 v-model을 적용하려면 @update:modelValue 이벤트를 사용하여 v-model을 만듬

• 기존

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

• 만든 컴포넌트 v-model

<LabelInput
	:modelValue="username"
	@update:modelValue="newValue => username = newValue"
/>

<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>

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

computed로 v-model구현

<div :style="{ fontSize: postFontSize + 'em' }">
  <BlogPost
    v-for="post in posts"
    :key="post.id"
    :title="post.title"
    @enlarge-text="postFontSize += 0.1"
  />
</div>

<template>
  <article>
    <h4>{{ title }}</h4>
    <button @click="$emit('enlarge-text')">크게</button>
  </article>
</template>

<script>
import { toRefs } from 'vue';

export default {
  props: ['title'],
  emits: ['enlarge-text'],
  setup(props) {
    const { title } = toRefs(props);
    return {
      title,
    };
  },
};
</script>

<style></style>