컴포넌트 구조와 props emit 이해하기 - Vue 기본기 다지기 3편

Understanding Component Structure Props and Emit - Vue Basics Part 3

<script setup>
import { ref } from 'vue'
import GreetingMessage from './components/GreetingMessage.vue'
 
const parentUsername = ref('promleeblog')
</script>
 
<template>
  <GreetingMessage user="Guest" />
  <GreetingMessage :user="parentUsername" />
</template>

<script setup>
// 부모로부터 'user'라는 이름의 prop을 받을 것이라고 선언합니다.
const props = defineProps(['user'])
</script>
 
<template>
  <h2>안녕하세요, {{ props.user }}님!</h2>
</template>

<script setup>
defineProps({
  // 타입만 검사
  name: String,
  
  // 타입과 필수 여부 검사
  age: {
    type: Number,
    required: true
  },
 
  // 여러 타입 허용 및 기본값 설정
  isPremium: {
    type: [Boolean, String],
    required: false,
    default: false
  },
  
  // 기본값이 객체나 배열인 경우 함수로 반환해야 합니다.
  tags: {
    type: Array,
    default: () => ['신규', '일반']
  }
})
</script>
 
<template>
  </template>

<script setup>
import { ref } from 'vue'
 
// 'update'라는 이름의 이벤트를 발생시킬 것임을 선언합니다.
const emit = defineEmits(['update'])
const newName = ref('')
 
function submitName() {
  // 'update' 이벤트를 발생시키면서, newName의 값을 함께 보냅니다.
  emit('update', newName.value)
}
</script>
 
<template>
  <input v-model="newName" placeholder="새로운 이름을 입력" />
  <button @click="submitName">이름 변경하기</button>
</template>

<script setup>
import { ref } from 'vue'
import UsernameInput from './components/UsernameInput.vue'
 
const username = ref('기존 사용자')
 
// 자식으로부터 받은 데이터(newName)로 부모의 데이터를 변경하는 함수
function changeUsername(newName) {
  username.value = newName // 부모의 username을 자식으로부터 받은 newName으로 변경
}
</script>
 
<template>
  <h1>현재 사용자: {{ username }}</h1>
  <UsernameInput @update="changeUsername" />
</template>