Notice
Recent Posts
Recent Comments
Link
250x250
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- 자료구조
- github
- scss
- math
- string
- leetcode
- 백준
- JavaSceipt
- 변수
- hash table
- 자료형
- 컴포넌트
- CSS
- SasS
- Algorithm
- JS
- HTML
- 코딩테스트
- vue.js
- sorting
- 알고리즘
- dynamic programming
- 프로그래머스
- Python
- java
- computed
- greedy
- array
- 파이썬
- JavaScript
Archives
- Today
- Total
Posis
[Vue.js] 자식 컴포넌트에서 부모 컴포넌트로 데이터 보내기 - emit 본문
이번 포스트에서는 emit Event를 활용해서 자식 컴포넌트에서 부모 컴포넌트로 데이터 통신하는 방법에 대해서 다뤄보겠습니다.
부모 컴포넌트에서 자식 컴포넌트로 데이터를 보내는 props 간단 정리
- 부모 컴포넌트에서는 props를 활용하여 자식 컴포넌트로 데이터를 보낼 수 있다.
- 즉, 단방향 데이터 바인딩 방식이다.
자식 컴포넌트에서 emit Event를 활용하여 부모 컴포넌트로 데이터 보내기
- 프로젝트이름/src/App.vue
<template>
<Input @msg="consoleMsg" />
</template>
<script>
import Input from './components/Input';
export default {
name: 'App',
components: {
Input,
},
methods: {
consoleMsg(msg) {
console.log(msg);
},
},
};
</script>
<style></style>
- 프로젝트이름/src/components/Input.vue
<template>
<input type="text" v-model="msg" />
</template>
<script>
export default {
emits: ['msg'],
data() {
return {
msg: '',
};
},
watch: {
msg() {
this.$emit('msg', this.msg);
},
},
};
</script>
<style></style>
Input 컴포넌트에 abc를 작성하면 watch 속성이 msg의 데이터 변경을 감지하고 한글자씩 a -> ab -> abc를 콘솔에 출력하는 것을 볼 수 있습니다.
동작 순서
- input의 입력한 데이터를 변경을 감지해줄 v-model='msg' 작성합니다.
- watch 속성에서 $emit 이벤트를 작성합니다. this.$emit(이벤트이름, input에 감지될 data), emits 속성에 부모 컴포넌트에서 사용할 이벤트이름 'msg'를 작성합니다.
- 부모 컴포넌트에 생성한 이벤트 작성합니다. @msg="사용할함수이름(consoleMsg)"
- App.vue - script - methods에 로직을 작성해줍니다.
- msg 데이터 변화에 따라 콘솔에 글자가 출력합니다.
728x90
'Vue.js' 카테고리의 다른 글
[Vue.js] Provide/inject를 활용한 컴포넌트 데이터 전달 (0) | 2021.08.15 |
---|---|
[Vue.js] 컴포넌트 재 사용성을 늘리기 위한 slot 활용하기 (0) | 2021.08.14 |
[Vue.js] 컴포넌트 props 전달하기 (0) | 2021.08.13 |
[Vue.js] 컴포넌트(component) 사용하기 feat. Vue-CLI (0) | 2021.08.13 |
[Vue.js] 컴포넌트(component)란 무엇인가? (0) | 2021.08.12 |