[add] EventBus使用 雙向溝通

src/App.vue

@@ -5,17 +5,20 @@ import 'vue-loading-overlay/dist/vue-loading.css';
 import GameCanvas from './components/GameCanvas.vue';
 import Popup from './components/Popup.vue';
 
-const visible = ref(false)
+const PopupVisible = ref(false)
+const self = {
+	PopupVisible: PopupVisible
+};
 
-window["eventBus"].on('alert', (msg: string) => {
-	visible.value = true;
+window["eventBus"].on('Alert', (msg: string) => {
+	PopupVisible.value = true;
 })
 </script>
 
 <template>
 	<GameCanvas />
-	<el-dialog v-model="visible" :show-close="false">
-		<Popup />
+	<el-dialog v-model="PopupVisible" :show-close="false">
+		<Popup :APP="self" />
 	</el-dialog>
 </template>
 

src/components/Popup.vue

@@ -2,10 +2,17 @@
 import { ref } from 'vue';
 import 'vue-loading-overlay/dist/vue-loading.css';
 
+const props = defineProps<{ APP: any }>()
+
 const input = ref('')
+function Send(content: string) {
+	window["eventBus"].emit("SendContent", content);
+	props.APP.PopupVisible.value = false;
+}
 </script>
 
 <template>
-	<el-input v-model="input" placeholder="Please input A" />
-	<el-input v-model="input" placeholder="Please input B" />
+	<el-input v-model="input" placeholder="Please input Label" />
+	<el-button type="primary" @click.native="() => { Send(input) }" size="large" round>確定
+	</el-button>
 </template>