도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.
안녕하세요 상훈입니다. 아주 예전에 이와같은 내용을 작성하긴했었던 것 같은데, 아예 뷰를 안쓰다보니 완전히 까먹어서.. 다시 공부해서 다시 글을 작성하게 되었습니다!
사전지식은 다음과 같습니다.
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라는 함수를 선언해주지 않았기 때문에 위 함수는 오류지만, 요점은 콜백함수처럼 생각하면된다는 겁니다.
반응형
'FrontEnd > Vue.js' 카테고리의 다른 글
| [Vue.js] Modal 창 만드는 방법 / stop 기능 활용하기 (0) | 2022.10.29 |
|---|---|
| [ Vue.js ] props 의 대용, Redux, Vuex 의 기초 단계 / Reactive (0) | 2022.10.27 |
| [ Nuxt.js ] Nuxt.js 에서 Component 삽입하는 방법 (0) | 2022.02.27 |
| [ Vue.js ] Error - Uncaught TypeError: Cannot use 'in' operator to search for 'path' in undefined at resolve 해결방법 (0) | 2022.02.24 |
| [ Vue.js, vuetify ] Vue.js 2, Medical chart app 구현하기 (0) | 2022.02.20 |
