티스토리 뷰

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

 

 

'dev_공부일지 > vue.js' 카테고리의 다른 글

slot  (0) 2024.05.10
q-tabs , store 만들어 쓰기  (0) 2024.05.09
localstorage 값 빼오기, v-for  (0) 2024.05.09
input v-model , Storage, enter 눌렀을 때 저장  (0) 2024.05.08
style scoped  (0) 2024.05.08
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/10   »
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
글 보관함