UPDATE

src/App.vue

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

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

@@ -10,8 +10,8 @@ const val = () => {
 
 <template>
   <div class="title">
-    <h3>我是子组件</h3><br/>
-    <button @click="val">点击获取子组件的值</button>
+    <h1>我是子组件</h1>
+    <button @click="val">点我给你值</button>
   </div>
   
 </template>
@@ -21,7 +21,10 @@ const val = () => {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-direction: column;
+  height: 100px;
   background-color: rgba(255, 0, 234, 0.377);
+  color: rgba(255, 0, 234, 0.377);
   
 }
 .title:hover {

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

@@ -11,7 +11,8 @@ const getVal = (data) => {
 <template>
   <child @value="getVal"></child>
   <div class="content">
-    <div>
+    <h1>我是父组件</h1>
+    <div style="color: black;">
       获取子组件的值：{{ game }}
     </div>
   </div>
@@ -22,7 +23,10 @@ const getVal = (data) => {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-direction: column;
+  height: 100px;
   background-color: rgba(115, 255, 0, 0.377);
+  color: rgba(115, 255, 0, 0.377);
   
 }
 .content:hover {