To do List 만들기_(2) 컴포넌트의 통신 props,event

<목차> 

(1) 컴포넌트의 기본 프레임 잡기 

(2) 컴포넌트의 통신 props,event 

(3) 각각의 컴포넌트에 기능 구현 

 

 

앞의 글에서 app.vue에 하위컴포넌트(자식컴포넌트)들을 등록을 배웠다. 

 

빨리 하위 컴포넌트의 역할을 구현하고 싶지만

 

그전에 알아 두어야할 것이 있다. props와 event이다.

 

앞에서 말했지만 app.vue라는 컴포넌트 안에 하위 컴포넌트를 넣어주어서 구성을 한다고 했지만 문제가 존재한다. 만약 간단하게 html코드로만 작성할 것이라면 문제는 없겠지만, 우리는 javascript기능 즉, 동적인 역할을 만들어줄것이다. (가령 무엇인가 타이핑을 했을때 그것이 출력이 되도록 말이다.) 

 

어떠한 데이터를 위(상위)에서 아래(하위)로, 아래에서 위로  하는것이 props와 event이다..

 

부모 -> 자식 : props 이용 (★데이터 공유)

자식 -> 부모 : Event 이용 (★이벤트 공유)

 

일단 이렇게만 알아두고 코드롤 보며 직접 설명하겠다.

 

App.vue <template></template>

아래와 같은 문법 구조를 갖게 되는데 

 

▶하위에서 상위 컴포넌트로 이벤트 전달:

     ＊이벤트 수신(상위):

        <컴포넌트 명 v-on:이벤트명=상위 컴포넌트의 메서드명></컴포넌트 명>

     ＊ 이벤트 발생(하위):

          this.$emit(‘이벤트명’ , 전달 값);

 

▶상위에서 하위 컴포넌트로 데이터 전달

     ＊수신(상위):

        <컴포넌트 명 v-bind: props 속성이름=상위 컴포넌트의 data속성</컴포넌트 명>

      ＊하위:

         props:[‘props속성이름’]

 

예시로 알아보자.

 

 

/app.vue 컴포넌트/

<template>
    <div id="app">
        <TodoHeader></TodoHeader>
        <TodoInput v-on:addTodoo="addTodo"></TodoInput>
        <TodoList v-bind:propsdata="todoItems" v-on:removeTodo="removeTodo"></TodoList>
        <TodoFooter v-on:removeAll="clearAll"></TodoFooter>
        
    </div>


</template>

<script>
import TodoHeader from './components/TodoHeader';
import TodoInp from './components/TodoInput';
import TodoLit from './components/TodoList';
import TodoFoot from './components/TodoFooter';


export default {
    data(){
        return {
            todoItems: []
        }
    },
    created: function() { 
    if (localStorage.length > 0) {
      for (var i = 0; i < localStorage.length; i++) {
        if (localStorage.key(i) !== 'loglevel:webpack-dev-server') {
          this.todoItems.push(JSON.parse(localStorage.getItem(localStorage.key(i))));
        }
      }
    }
  },
    methods: {
        addTodo(todoItem){
            //로컬스토리지에 데이터를 추가하는 로직
            localStorage.setItem(todoItem, todoItem);
            this.todoItems.push(todoItem);
        },
        removeTodo(todoItem, index) {
            //각각 삭제 하는 역할.                 
            localStorage.removeItem(todoItem);
            this.todoItems.splice(index, 1);
        },
        clearAll(){
            //로컬스토리지 전체 삭제, todoItems 초기화
            localStorage.clear();
            this.todoItems = [];
        }
    },    
    components: {
        'TodoHeader': TodoHeader,
        'TodoInput': TodoInp,
        'TodoList': TodoLit,
        'TodoFooter': TodoFoot
    }
}
</script>

/Todolist.vue컴포넌트/

<template>
    <section>
        <ul>
            <li v-for="(todoItem, index) in propsdata" :key="todoItem">
                {{ todoItem }}  <!-- li태크를 반족적으로 만들어냄 -->
                <button type="button" v-on:click="removeTodo(todoItem, index)">삭제</button> <!-- 삭제버튼 클릭시 removeTodo 함수 작동 -->
            </li>
        </ul>
    </section>
</template>

<script>
export default {
    props: ['propsdata'],
    methods: {
    	removeTodo(todoItem, index){
            this.$emit('removeTodo', todoItem, index);
        }
    }    
}
</script>