Vue3 To do list 만들기 (6) props 부모->자식 데이터 전송

먼저 기존 App.vue에 있던 ul을 components 안에 todoList.vue 를 새로 생성하고 옮겨준다

<template>
  <ul class="list-group " 
v-for="(i,index) in todolist" 
v-bind:key="i.id">
<li class="list-group-item d-flex align-items-center mt-2">
  <div class="form-check flex-grow-1">
      <input class="CheckInput"
         v-model="i.isdone"
         type="checkbox">
          <label class="checkLabel"
          :class="{todoStyle:i.isdone}"
          >{{i.sbj}} </label>
  </div>
  <div>
    <button class= "btn btn-danger btn-sm"
    @click="deleteitem(index)">삭제</button>
  </div>
</li>

</ul>
</template>

<script>
export default {
   
}
</script>

<style>

</style>
//components/TodoList.vue

부모 컴포넌트에 경로를 import해주고, 컴포넌트역시 등록해준다

import TodoList from './components/TodoList.vue';

//현재 등록된 컴포넌트는 TodoForm과 TodoList 자식 컴포넌트가 두개 있음을 뜻함
components:{
  TodoForm,TodoList
},

App.vue의 본문에서

<TodoList :todolist="todolist"/>

컴포넌트 사용을 하는데

이때 :todolist는 자식컴포넌트로 보낼때의 이름 뒤의 todolist는 부모 컴포넌트에서 사용중인 함수 또는 변수(여기서는 배열 변수이다)

자식 컴포넌트인 TodoList.vue로 돌아가서

props:['todolist']//받아오는 이름 + 위에서 사용하는 이름 props는 return역할을 함께함

스크립트 안에 단순히 부모쪽에서 보낸 todolist 배열을 받는걸로도 할 수 있지만,

props를 객체로 만들수도있다

공식홈페이지 props 문서

<script>
export default {
    props:{
        todolist:{ //받아올 그리고 자식컴포넌트에서 사용될 변수or함수명
            type: Array, //타입설정
            required: true, //필수인지 아닌지
        }
    }
}
</script>

---

이때 잘 모르고 앞서 부모 컴포넌트에서 <TodoList :ㅇㅇ="ㅁㅁ" /> 부분을 작성할때

ㅇㅇ가 자식으로 보낼때 명칭이라하여 todoListapp ="todolist" 로 하여 받았는데 안되길래 뭐가 문젤까 하다가

props를 사용하면 return이 따로 없어, 그 명칭 그대로 본문에서도 사용하기 때문에 안된것이다 (자식컴포 본문에서 todolist를 사용중) 따라서 부모에서 todoListapp으로 보낼거였으면 자식컴포넌트 TodoList.vue에서의 변수명을 다 바꿨어야 했던것