[ Vue.js ] Child Component TO Parent Component / 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달 / TodoList - Add

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요 상훈입니다. 아주 예전에 이와같은 내용을 작성하긴했었던 것 같은데, 아예 뷰를 안쓰다보니 완전히 까먹어서.. 다시 공부해서 다시 글을 작성하게 되었습니다!

사전지식은 다음과 같습니다.

1. 컴포넌트의 관계를 이해한다.
2. 자식 컴포넌트 → 부모 컴포넌트로 데이터를 전달하고싶다.

 

Vue.js Todolist 를 구현할 때 Add의 한 부분을 담당하고 있습니다.

 

1. 부모 컴포넌트 Parent Component

//부모컴포넌트 : Todo.vue
<template> 
  <div>
    <h3>Greeting!</h3>
    <TodoInput @addNewTodo="checknew" />
  </div>
</template>
<script>
import TodoInput from "./TodoInput.vue";

export default {
  components: {
    TodoInput,
  },
  methods: {
    checknew(newItem) {
      this.newTodo = newItem;
    },
  },
};
</script>

 

2. 자식 컴포넌트 Child Component

//자식 컴포넌트 : TodoInput.vue
<template>
  <div>
    <input
      type="text"
      maxlength="20"
      v-model="newItem"
      @keyup.enter="addTodo"
    />
    <button type="button" @click="addTodo">Add</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      newItem: "",
    };
  },
  methods: {
    addTodo() {
      this.$emit("addNewTodo", this.newItem);
    },
  },
};
</script>

---

3. 위 코드를 보고서 이해가 잘 안되셨을 때 봐주세요.

핵심은 $emit 과 @이벤트 핸들러입니다.

자식 컴포넌트에서 
1) addTodo 라는 메서드를 실행합니다.
2) $emit을 통해 addNewTodo 라는 Props로 전달합니다.

부모 컴포넌트에서
1) addNewTodo 라는 Props가 있습니다.
2) 그리곤 newTodo 라는 메서드로 값을 받아옵니다.

부모 > 자식의 관계는 전부 Props 입니다.

addNewTodo 의 props 명으로 이벤트를 지정해놓는 것이죠

그런데, 자식에서 이벤트가 발생 → $emit으로 메서드 newTodo 를 콜백함수처럼 받아온다고 생각하면, 이해하시기 수월해집니다. 

 

Vanila Javascript 

//부모 컴포넌트
parent (function (ret) {
    //자식 컴포넌트에서 보낸 값을 ret으로 받아옴
    console.log(ret);
});

물론 parent라는 함수를 선언해주지 않았기 때문에 위 함수는 오류지만, 요점은 콜백함수처럼 생각하면된다는 겁니다.