UPDATE

src/App.vue

 <script setup>
-
+import parent from './子组件传值给父组件/parent.vue';
 </script>
 
 <template>
-  
+  <parent></parent>
 </template>
 
 <style scoped>

src/page/child.vue

-<script setup>
-import { defineEmits } from 'vue';
-const emit = defineEmits(["value"])
-</script>
-
-<template>
-  <button @click="add">点我加一</button>
-</template>
-
-<style scoped>
-</style>
\ No newline at end of file

src/page/parent.vue

-<script setup>
-import child from './child.vue';
-</script>
-
-<template>
-  <child></child>
-</template>
-
-<style scoped>
-</style>
\ No newline at end of file

src/子组件传值给父组件/child.vue

+<script setup>
+import { defineEmits } from 'vue';
+// 这里就相当于一个声明，告诉父组件，我子组件会传哪些值
+const emit = defineEmits(["value"])
+
+const val = () => {
+  emit("value", "旅行者，当你重新踏上旅途...")
+}
+</script>
+
+<template>
+  <div class="title">
+    <h3>我是子组件</h3><br/>
+    <button @click="val">点击获取子组件的值</button>
+  </div>
+  
+</template>
+
+<style scoped>
+.title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(255, 0, 234, 0.377);
+  
+}
+.title:hover {
+  filter: drop-shadow(0 0 2em rgb(255, 1, 255));
+}
+</style>
\ No newline at end of file

src/子组件传值给父组件/parent.vue

+<script setup>
+import { ref } from 'vue';
+import child from './child.vue';
+
+const game = ref("");
+const getVal = (data) => {
+  game.value = data;
+}
+</script>
+
+<template>
+  <child @value="getVal"></child>
+  <div class="content">
+    <div>
+      获取子组件的值：{{ game }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(115, 255, 0, 0.377);
+  
+}
+.content:hover {
+  filter: drop-shadow(0 0 2em rgb(1, 255, 14));
+}
+</style>
\ No newline at end of file