dev/vue.js

$emit

dev_0hoon 2024. 5. 9. 17:53

$emit은 상위 컴포넌트에 이벤트를 보낼 수 있다.

 

            this.$emit('이벤트 이름', 인자1, 인자2 ...);
    methods : {
        addTodo(){
            this.$emit('addTodoItem',this.todoItem);
            this.removeTodoItem();
        },
        removeTodoItem(){
            this.todoItem = "";
        }
    }

만약 하위컴포넌트에서 addTodo메소드가 발생할 경우 상위 컴포넌트의 addTodoItem함수를 발동 시키려면

 

<template>
  <div>
    <TodoHeader></TodoHeader>
    <TodoInput v-on:addTodoItem="addOneItem"></TodoInput>

...
  </div>
</template>

...
  methods : {
    addOnItem : function(){
      var obj = {};
                obj.complete = false;
                obj.item = this.todoItem;
            localStorage.setItem(this.todoItem, JSON.stringify(obj));

    }
  }
}
</script>

하위 컴포넌트에서 호출한 addTodoItem은 addOneItem이다. 해당 메소드를 호출하게 된다.