Vue3 To do list 만들기 (5) 데이터 emit (자식 컴포넌트 ->부모 컴포넌트)

<template>
<form
@submit.prevent="Submit" 
 class="d-flex">

<div class="flex-grow-1 ">
<input class="form-control "
 type="text"
  v-model="todo" 
  placeholder="할일"
  >
</div>
<div >
  <button class="btn btn-primary">
  추가
</button>
</div>

</form>


</template>

<script>
import {ref} from 'vue';

export default {
setup(props, context){ //props는 아직 잘 모르겠고 context가 부모로 보내는 부분
    let todo=ref('')

      var  Submit = ()=>{
        context.emit('todoAdd',{id: Date.now(),sbj:todo.value,isdone : false,}); //context.emit할때 보내려는 이름, {값들}
         todo.value="";
  }
    return {
        todo, //여기있는 return은 app.vue와 마찬가지로 자식컴포넌트 내에서 사용되는 변수 및 함수명
        Submit,
    }
}}
</script>

<style>

</style>

//TodoFrom.vue

내용이 어려우니 전체 코드와 분석을 해보련다..

 

<script>
import {ref} from 'vue';

export default {
setup(props, context){ //props는 아직 잘 모르겠고 context가 부모로 보내는 부분
    let todo=ref('')

      var  Submit = ()=>{
        context.emit('todoAdd',{id: Date.now(),sbj:todo.value,isdone : false,}); //context.emit할때 보내려는 이름, {값들}
         todo.value="";
  }
    return {
        todo, //여기있는 return은 app.vue와 마찬가지로 자식컴포넌트 내에서 사용되는 변수 및 함수명
        Submit,
    }
}}
</script>

주석으로 설명 대체..

 

<template>
<div class ="container">
  <h1>TodoList</h1>
 <TodoForm @todoAdd="todoAddapp"  />
<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>
  <div v-if="!todolist.length">
    <b>오늘은 갓백수의 삶을 꿈꾸시나용..?</b>
  </div>


</div>
</template>

<script>

import {ref} from 'vue'

import TodoForm from './components/TodoForm.vue';
export default {
components:{
  TodoForm
},

setup()
{
  //let todo= ref("");
  let todolist = ref([  ]);

  let todoStyle={
    textDecoration:'line-through',
    color:'gray'
  }


  var deleteitem=(index)=>{
  // console.log(index)
  todolist.value.splice(index,1)
  }

  var  todoAddapp = (todo)=>{
 todolist.value.push(todo)
  }
  return {
   todoAddapp,todolist,todoStyle,deleteitem,
  }; 
}
}
</script>



<style>
.todoStyle{
  color:red;
  text-decoration: line-through;
}
</style>
//app.vue

바뀐점

  var  todoAddapp = (todo)=>{
 todolist.value.push(todo)
  }
  return {
   todoAddapp,todolist,todoStyle,deleteitem,
  }; 
}

기존의 submit을 todoAddapp으로 바꿨다 받아오는 값은 자식 컴포넌트의

todo(let todo=ref(" "))

함수의 이름이 바뀌었으니 return 역시 Submit->todoAddapp으로 변경

 

 <TodoForm @todoAdd="todoAddapp"  />

<TodoForm 안에 v-on:todoAdd (자식 컴포넌트에서 context.emit으로 보낸 이름)="todoAddapp(부모 컴포넌트app.vue
에서 만든 함수"

..?