vue3 - props 상태관리( 부모 -> 자식 )

• props를 통해 부모에서 자식으로 상태관리해보자
• 부모에서 변경된 데이터는 자식에서도 변경이됨
• 자식컴포넌트에서 받은 데이터는 변경하면 안됨

부모컴포넌트

<script setup>
import TodoSimpleForm from './TodoSimpleForm.vue'
import TodoList from './TodoList.vue'
const todos = ref([]) // 요놈을 자식컴포넌트로 보낼꺼임

const addTodo = (todo) => { 
  console.log(todo)
  todos.value.push(todo)
}
 
</script>

<template>
 
  <TodoList :todos="todos" /> <!--todos를 자식컴포넌트로 보내보자, :내가지은 이름 ="원하는데이터"  -->
</template>
 

자식컴포넌트

<script>
export default {
  props: ['todos'],  // 이렇게 'todos'(내가 지은이름) 을 받아오면 바로 todos 사용이 가능함
}
</script>

<template>
  <div v-for="(todo, index) in todos" :key="todo.id">
    <!-- 여기서 todos는 부모컴포넌트에 있기 때문에 props로받아야함  -->
    <div class="bg-white text-black p-3 rounded text-20px w-128  mx-auto mt-5 flex justify-between">
      <input v-model="todo.completed" type="checkbox">
      <label :class="{ todo: todo.completed }">
        {{ todo.subject }}
      </label>
      <div>
        <button @click="deleteTodo(index)">
          DELETE
        </button>
      </div>
    </div>
  </div>
</template>

<style>

</style>