emit () completion confirm 받는 예제 완성. !!!

vuejs/vue#5443 참조

You could also just pass the resolve parameter directly to $emit like so:

Author: neofectphilip

package-lock.json

@@ -11,7 +11,6 @@
     "core-js": "^3.6.5",
     "deep-equal": "^2.0.3",
     "lodash": "^4.17.20",
-    "moment": "^2.27.0",
     "v-calendar": "^1.0.8",
     "vue": "^2.6.11",
     "vue-monthly-picker": "^0.2.8",
@@ -30,11 +29,13 @@
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
+    "moment": "^2.27.0",
     "sass": "^1.19.0",
     "sass-loader": "^8.0.0",
     "tui-grid": "^4.15.0",
     "vue-cli-plugin-axios": "^0.0.4",
     "vue-cli-plugin-vuetify": "^2.0.7",
+    "vue-moment": "^4.1.0",
     "vue-template-compiler": "^2.6.11",
     "vuetify-loader": "^1.3.0"
   },

package.json

@@ -88,14 +88,56 @@
         </v-row>
       </v-col>
     </v-row>
+    fire message : <input type='text' v-model='message' size=20 style="background-color:yellow;"> &nbsp;&nbsp;
+          <input type='button' value="fire message" @click="fireMessage" style="width: 100px; background-color: darkgray;"> <br>
+          here : <emit-async-await></emit-async-await> 여기까지...
   </v-container>
 </template>
 
 <script>
+
+import Vue from 'vue'
+import EmitAsyncAwait from './emitasyncawait'
+ 
+import {EventBus} from '../service/emitasyncawait_evtbus'
+import moment from 'vue-moment'
+Vue.use(moment)
+
+Vue.component("emit-async-await", EmitAsyncAwait);
+
   export default {
     name: 'HelloWorld',
+    components: {
+      EmitAsyncAwait
+    },
+    created() {
+      console.log('created called')
+
+      const self = this
+      console.log('created . self.message=' + self.message)
+    },
+    methods: {
+      now: function() {
+        const self = this
+
+        return self.$moment(new Date()).format('HH:mm:ss')
+      },
+      fireMessage: async function() {
+        const self = this
+
+        console.log('[' + self.now() + '] ' + self.message + ' fired now...')
+
+        let result = new Promise((resolve) => EventBus.$emit('fire-message', self.message, resolve) )
+
+        await result;
 
+        result.then( (resultCode) => {
+          console.log('[' + self.now() + '] ' +  'resultCode = ' + resultCode)
+        });  
+      }
+    },
     data: () => ({
+      message: '',
       ecosystem: [
         {
           text: 'vuetify-loader',

src/components/HelloWorld.vue

@@ -0,0 +1,58 @@
+<template>
+  <div style="width: 400px">
+      <span> message : {{ message }} </span>
+  </div>
+</template>
+
+<script>
+// eslint-disable-next-line no-unused-vars
+import Vue from 'vue'
+
+import {EventBus} from '../service/emitasyncawait_evtbus'
+import moment from 'vue-moment'
+
+Vue.use(moment)
+
+// Or just use in separate component
+export default {
+    name: 'EmitAsyncAwait',
+    data: function() {
+        return {
+            message: ''
+        }
+    },
+    created () {
+
+      // eslint-disable-next-line no-unused-vars
+      const self = this
+
+        // EventBus.$on('fire-message', self.changeMessage)
+
+        EventBus.$on('fire-message', (msg, resolve) => {
+            self.message = msg
+
+            setTimeout( () => {
+                console.log( '[' + self.now() + '] ' + 'message: ' + msg + ' received ')
+                resolve(200)
+        }, 2000)
+        })
+    },
+  methods: {
+      now: function() {
+        const self = this
+
+        return self.$moment(new Date()).format('HH:mm:ss')
+      },
+    changeMessage: function (msg, resolve) {
+        // eslint-disable-next-line no-unused-vars
+        const self = this
+        self.message = msg
+
+        setTimeout( () => {
+            console.log( '[' + self.now() + '] ' + 'message: ' + msg + ' received ')
+            resolve(200)
+        }, 2000)
+    }
+  }
+}
+</script>

src/components/emitasyncawait.vue

@@ -0,0 +1,3 @@
+import Vue from 'vue';
+
+export const EventBus = new Vue();