Vue3 To do list 만들기 (7) props 주의사항

Props는 부모 컴포넌트에서 자식 컴포넌트의 값을 변경해도 괜찮지만, 자식에서 부모의 값을 변경하는것은 하지말라고 한다.

      <input class="CheckInput"
		v-model="todolist.isdone"
         type="checkbox">
         //TodoList.vue

기존의 코드에서 v-model을 통하여 todolist.isdone값의 수정을 하였으나,

todolist[]는 부모컴포넌트인 App.vue에 있다.

 

따라서 v-model 대신 index값을 부모컴포넌트로 전달하여, 부모컴포넌트 안에서 수정을 하려고 한다.

 

<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"
        :value="todolist.isdone"
        @change="toggleTodo(index)"
        
         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>
//TodoList.vue (자식)

:value (v-bind:value) 로 todolist.isdone을 지정하여주고

@change(v-on:change)로 체크박스에 변화가 있을떄 toggleTodo함수를 index를 매개변수로 호출한다

    setup(props,context){
      const toggleTodo = (index)=>{
        context.emit('toggle-todo',index);
      };

    return {
            toggleTodo,
           }
    }
    //Todolist.vue Script

setup function에서 ToggleTodo 함수를 선언하고 (index)매개변수를 받는다,

context.emit으로 부모 컴포넌트에게 toggle-todo라는 이벤트명으로 index값을 전달한다.

부모는 이를 수신하기 위하여 v-on:이벤트명을 호출

<TodoList :todolist="todolist" @toggle-todo="toggleTodo" /> 
//app.vue

@toggle-todo로 이벤트를 호출하고 부모컴포넌트에서 toggleTodo 함수를 호출한다.

 

  var toggleTodo=(index)=>{
    todolist.value[index].isdone=!todolist.value[index].isdone
};
//app.vue  Script

toggleTodo를 선언하고 이벤트로 담겨온 index를 매개변수로 사용,

todolist배열의 index번째의 isdone(T/F)값을 Not을 통하여 바꿔준다.

 

---

 

선생님의 도움을 받아서 자문을 구한결과

기존의 setup 및 emit방식은 구방식이라

 

자식 컴포넌트의 TodoList.vue 수정을 하였다.

<script setup>
import { defineProps, defineEmits } from "vue";

const props = defineProps({
  todolist: {
    type: Array,
    required: true,
  },
});

const emit = defineEmits(["toggle-todo"]);

const toggleTodo = (index) => {
  emit("toggle-todo", index);
};
//props:['todolist']//받아오는 이름 + 위에서 사용하는 이름 props는 return역할을 함께함
</script>

<script setup>

요 setup을 script에 넣어버리고

vue 공식홈페이지 문서

단 emit의 경우 context에 있었기 때문에

import { defineProps, defineEmits } from "vue";

따로 import를 해주어야한다.

 

 

---

총평 : 진자 진자 강의 들으면서 일단 따라쓰고 복기하는데 너무 어렵다...

더 자세한 설명은 유튜브 코지 코더 Kossie Coder 강의를 수강하면 도움이 될듯..?