vue3 - emit 상태관리

• emit 상태관리 배우기
• 자식컴포넌트에서 부모컴포넌트로 객체를 옮기기

자식컴포넌트

<script>
export default {
  setup(props, context) { // 1. 자식 -> 부모로 보낼 때 context가 필요함
    
    const addTodo = () => {
      if (todo.value === '') { hasError.value = true }
      else {
        context.emit('add-Todo', { // 2. event 이름을 적어주고(add-Todo), 
          id: Date.now(), // 올려주고 싶은 데이터를 넣어주면됨
          subject: todo.value,
          completed: false,
        }) 

        hasError.value = false
        todo.value = ''
      }
    }
    return {
      todo, hasError, addTodo,
    }
  },
}
</script>

 
      <div>
        <button class="bg-red text-white p-5 rounded" @click="addTodo">
          Add
        </button>
      

</style>

부모컴포넌트

<script setup>

const onSubmit = (todo) => { // 여기 인자 todo에 자식컴포넌트에서 받아온 data가 들어감
  console.log(todo)
  todos.value.push(todo)
}
</script>
<template>
  <TodoSimpleForm @add-Todo="onSubmit" />
  <!-- 3. props랑 비슷함 add-Todo(이름)="onSubmit 으로 가져옴") -->
  </template>