🖥️FE🖥️/📗Vue📗
Vue Emit 간단한 실습 코드
들눈
2023. 11. 23. 10:13
TestingVue.vue
<template>
<div>
<child-component :parentData="parentData" @updateParent="updateParentData" />
</div>
<p>{{ parentData }}</p>
</template>
<script>
import ChildComponent from './TestingVueChild.vue';
export default {
data() {
return {
parentData: 'Hello from parent',
};
},
methods: {
updateParentData(newData) {
this.parentData = newData;
},
},
components: {
ChildComponent,
},
};
</script>
TestingVueChild.vue
<template>
<div>
<button @click="updateParent">Update Parent Data</button>
</div>
</template>
<script>
export default {
props: ['parentData'],
methods: {
updateParent() {
this.$emit('updateParent', 'New data from child');
},
},
};
</script>
약간 정리하면 $emit('사용할 함수 명 공간', '전달할 데이터 공간') 인것 같다