Vue3 기본

1. 기본 이벤트 props 내려주기, 이벤트 등록

• TodoList.vue

<template>
  <div class="row">
  	<ul class="list-group">
    	<TodoListItem 
        v-for="todoItem in todoList" 
        :key="todoItem.id" : todoItem ="todoItem" 
        @delete-todo="$emit('delete-todo', $event)"/>
    </ul>
  </div>
</template>

<script>
	import TodoListItem from './TodoListItem.vue'
    
    export default {
    	name : "TodoList",
        components : {TodoListItem},
        props : {
        	todoList : {type : Array, required : true}
        },
        emits : ["delete-todo", "toggle-completed"],
    }
</script>

• TodoListItem.vue

<template>
  <li 
    class="list-group-item" 
    :class="{ 'list-group-item-success': todoItem.completed }"
    @click="$emit('toggle-completed', todoItem.id)"
  >
    <span 
      class="pointer" 
      :class="{ 'todo-done': todoItem.completed }"
    >
      {{ todoItem.todo }} {{ todoItem.completed ? "(완료)" : "" }}
    </span>
    
    <span 
      class="float-end badge bg-secondary pointer"
      @click.stop="$emit('delete-todo', todoItem.id)"
    >
      삭제
    </span>
  </li>
</template>

<script>
export default {
  name: "TodoListItem",
  props: {
    todoItem: { type: Object, required: true }
  },
  emits: ["delete-todo", "toggle-completed"]
}
</script> 


<script>
	export default {
    	name : "TodoListItem",
        props : {
        	todoItem : {type : Object, required: true}
        },
        emits : ["delete-todo", "toggle-completed"]
    }

</script>

-App.vue

<TodoList @delete-todo="removeTodo" />
  
  removeTodo(todoId){
  /// 
 }
  

2. Composition API

option API에서 제공하는 data, method, computed 옵션 대신 setup() 메서드를 화룡하여 컴포넌트 상태 초기화

<template>
  <div>
  	 X : <input type="text" v-model.number="x"/><br/>
     Y : <input type="text" v-model.number="y"><br/>
  </div>
</template>  

import {ref} from 'vue';
export default {
	name : "Calc",
    setup(){
    	const x = ref(10);
        const y = ref(15);
    }
}

• ref는 primitive 타입의 값을 이용해 반응성 데이터
  를 생성
  x.value, y.value와 같이 value 속성을 이용하여 값을 가져와야 함

<template>
  <div>
  	 X : <input type="text" v-model.number="x"/><br/>
     Y : <input type="text" v-model.number="y"><br/>
    <button @click="calcAdd">계산</button><br/>
    <div>결과 : {{state.result}}</div>
  </div>
</template>  

import {ref} from 'vue';
export default {
	name : "Calc",
    setup(){
    	const state = reactive({x : 10, y : 20, result : 30})
        const calcAdd = () => {
         	state.result = state.x + state.y; 
        }
        return {state, calcAdd}
    }
}

• 반드시 state를 리턴할것, x,y등 처럼 객체 내부 속성을 리턴하면 안된다.