[to-do-app] 리팩토링: 할 일 추가 기능

 

 

 App.vue 

하위 컴포넌트 → 상위 컴포넌트 데이터 전달하기

v-on:하위 컴포넌트에서 발생하는 이벤트 명="현재 컴포넌트의 메서드 명"

v-on 키워드를 사용합니다.

 

<template>
	<div id="app">
		<todo-header />
		<todo-input v-on:addTodoItem="addOneItem"></todo-input>
		<TodoList v-bind:propsdata="todoItems"></TodoList>
		<TodoFooter />
	</div>
</template>

현재 컴포넌트에서 addOneItem() 함수를 만들고, 하위 컴포넌트에서 addTodoItem 이벤트를 전달하도록 하겠습니다.

즉, 하위 컴포넌트에서 addTodoItem 이벤트가 발생하면 addOneItem() 함수가 수행됩니다.

 

 

data() {
    return {
        todoItems: [], // app.vue 에서 관리가 된다.
    };
},

methods: {
    // input에서 입력된 메모를 추가
    addOneItem(todoItem) {
        var obj = { completed: false, item: todoItem };

        // JSON.stringfy: obj -> str 변경
        // 그렇지않으면 스크립트단에서 확인을 할 수 없다. [object Object]로 들어가서
        localStorage.setItem(todoItem, JSON.stringify(obj));
        this.todoItems.push(obj);
    },
},

addOneItem 메소드를 생성합니다.

로컬 스토리지에 매개변수로 받은 todoItem을 키로, 그리고 해당 객체를 JSON 형식으로 저장합니다.

이제 todoItems 배열에 해당 객체를 넣으면 화면에 반영이 되는 것을 확인할 수 있습니다.

 

 

 

 TodoInput.vue 

methods: {
    // addTodo: function() {}
    addTodo() {
        // 값이 있을때만 실행
        if (this.newTodoItem !== "") {
            this.$emit("addTodoItem", this.newTodoItem);
            this.clearInput();
        }
    },

    clearInput() {
        this.newTodoItem = "";
    },
},

this.$emit 함수로 이벤트를 발생시킬 수 있습니다.

addTodoItem 은 발생된 이벤트의 이름입니다. 그리고 다음으로 오는 매개변수들은 상위 컴포넌트로 보낼 데이터입니다.

 

 

 

 결과 화면 

할 일이 화면에 바로 추가되는 것을 확인할 수 있습니다.

 

 

 

 

vue todo

vue 할일 추가

vue v-on

vue emit

---