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이다. 해당 메소드를 호출하게 된다.