[Vue] $Emit, v-for 속성, transition-group

Emmit은 이벤트 발생기이다.

  addTodo(){  //arrow function 사용x
            if(this.newTodoItem !== ''){
                var value = this.newTodoItem && this.newTodoItem.trim();
                this.$emit('addTodo', value);
                this.clearInput();
            }
        },

기본적으로 이런식으로 사용하며, 하위컴포넌트에서 상위컴포넌트로 값을 전달할 때 사용한다.

$emit('parents component event name', value) 와 같이 사용하며, 

받는 쪽에서는 

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

<script>
import TodoHeader from './components/TodoHeader.vue';
import TodoFooter from './components/TodoFooter.vue';
import TodoInput from './components/TodoInput.vue';
import TodoList from './components/TodoList.vue';

export default {
  data(){
    return {
      todoItems : []
    }
  },
  methods : {
    addTodo(todoItem){
      console.log('todoItem', todoItem);
      localStorage.setItem(todoItem,todoItem);
      this.todoItems.push(todoItem);
    }
  },
  components : {
    TodoHeader : TodoHeader,
    TodoFooter : TodoFooter,
    TodoInput : TodoInput,
    TodoList : TodoList,
  }
}
</script>

template 부분에서 이벤트 수신 v-on부분과 스크립트 부분 메소드이름을 깔 맞춤해야 정상 동작한다.

주의사항은 전달받은 인자 값은 부모컴포넌트에서 참고용으로만 활용하고, 데이터 값은 변경하지 말아야한다. 

컴포넌트는 각자의 고유한 유효범위를 갖기 때문에 부모컴포넌트에서 전달받은 값을 수정하더라도 자식컴포넌트에는 반영되지 않는다.

2. v-for 속성

뷰도 리액트와 마찬가지로 for문을 사용할때 key 값을 사용한다.

이유는 브라우져가 랜더링할때 키값이 없으면, 브라우져에서 바뀐 순서대로 전부 그려야하는데, 키값이 있으면 단순히 내부적으로 순서 재조

정하기 때문에 화면에서 그리는 속도가 빨라진다.

 

3.transition-group

뷰 애니메이션은 뷰 크레임 워크 자체에서 지원하는 것이 있어서, CRUD시 효과를 적용할 수 있다. 

  <transition-group name="list" tag="ul">            
   <li v-for= "(todoItem, index) in propsdata" :key="todoItem" class="shadow">
     <i class="checkBtn fa fa-check" aria-hidden="true"></i>
        {{todoItem}}
      <span class="removeBtn" type="button" @click="removeTodo(todoItem,index)">
         <i class="fa fa-trash-o" aria-hidden="true"></i>
      </span>
   </li> 
</transition-group>  

이때 key속성을 반드시 지정해주어야한다.