Vue Emit 간단한 실습 코드

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('사용할 함수 명 공간', '전달할 데이터 공간') 인것 같다