Vue3 To do list 만들기 (7) props 주의사항 Props는 부모 컴포넌트에서 자식 컴포넌트의 값을 변경해도 괜찮지만, 자식에서 부모의 값을 변경하는것은 하지말라고 한다. //TodoList.vue 기존의 코드에서 v-model을 통하여 todolist.isdone값의 수정을 하였으나, todolist[]는 부모컴포넌트인 App.vue에 있다. 따라서 v-model 대신 index값을 부모컴포넌트로 전달하여, 부모컴포넌트 안에서 수정을 하려고 한다. {{i.sbj}} 삭제 //TodoList.vue (자식) :value (v-bind:value) 로 todolist.isdone을 지정하여주고 @change(v-on:change)로 체크박스에 변화가 있을떄 toggleTodo함수를 index를 매개변수로 호출한다 setup(props,context){ .. Vue3 To do list 만들기 (6) props 부모->자식 데이터 전송 먼저 기존 App.vue에 있던 ul을 components 안에 todoList.vue 를 새로 생성하고 옮겨준다 {{i.sbj}} 삭제 //components/TodoList.vue 부모 컴포넌트에 경로를 import해주고, 컴포넌트역시 등록해준다 import TodoList from './components/TodoList.vue'; //현재 등록된 컴포넌트는 TodoForm과 TodoList 자식 컴포넌트가 두개 있음을 뜻함 components:{ TodoForm,TodoList }, App.vue의 본문에서 컴포넌트 사용을 하는데 이때 :todolist는 자식컴포넌트로 보낼때의 이름 뒤의 todolist는 부모 컴포넌트에서 사용중인 함수 또는 변수(여기서는 배열 변수이다) 자식 컴포넌트인 Todo.. Vue3 To do list 만들기 (5) 데이터 emit (자식 컴포넌트 ->부모 컴포넌트) 추가 //TodoFrom.vue 내용이 어려우니 전체 코드와 분석을 해보련다.. 주석으로 설명 대체.. TodoList {{i.sbj}} 삭제 오늘은 갓백수의 삶을 꿈꾸시나용..? //app.vue 바뀐점 var todoAddapp = (todo)=>{ todolist.value.push(todo) } return { todoAddapp,todolist,todoStyle,deleteitem, }; } 기존의 submit을 todoAddapp으로 바꿨다 받아오는 값은 자식 컴포넌트의 todo(let todo=ref(" ")) 함수의 이름이 바뀌었으니 return 역시 Submit->todoAddapp으로 변경 이전 1 다음 반응형
