diff --git a/src/App.vue b/src/App.vue
index 90cdc2eb7fce72f508e68da04b2a4cc7ec3b3eb1..b7aed981b0d67227bc6e658dc204cf1cbc58f04c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,9 @@
 <script setup>
-
+import parent from './子组件传值给父组件/parent.vue';
 </script>
 
 <template>
-  
+  <parent></parent>
 </template>
 
 <style scoped>
diff --git a/src/page/child.vue b/src/page/child.vue
deleted file mode 100644
index 19748ff4d2978935d9490f9752341ad3e1eead78..0000000000000000000000000000000000000000
--- a/src/page/child.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<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
diff --git a/src/page/parent.vue b/src/page/parent.vue
deleted file mode 100644
index b9ac528bda9adbcf210079e25ee930a9ed14d9bd..0000000000000000000000000000000000000000
--- a/src/page/parent.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<script setup>
-import child from './child.vue';
-</script>
-
-<template>
-  <child></child>
-</template>
-
-<style scoped>
-</style>
\ No newline at end of file
diff --git "a/src/\345\255\220\347\273\204\344\273\266\344\274\240\345\200\274\347\273\231\347\210\266\347\273\204\344\273\266/child.vue" "b/src/\345\255\220\347\273\204\344\273\266\344\274\240\345\200\274\347\273\231\347\210\266\347\273\204\344\273\266/child.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..365c3ecaeb0ea171f59e2f634d4193c35441190c
--- /dev/null
+++ "b/src/\345\255\220\347\273\204\344\273\266\344\274\240\345\200\274\347\273\231\347\210\266\347\273\204\344\273\266/child.vue"
@@ -0,0 +1,30 @@
+<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
diff --git "a/src/\345\255\220\347\273\204\344\273\266\344\274\240\345\200\274\347\273\231\347\210\266\347\273\204\344\273\266/parent.vue" "b/src/\345\255\220\347\273\204\344\273\266\344\274\240\345\200\274\347\273\231\347\210\266\347\273\204\344\273\266/parent.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..370758210bc64b911eb46fbcb043f476459a5469
--- /dev/null
+++ "b/src/\345\255\220\347\273\204\344\273\266\344\274\240\345\200\274\347\273\231\347\210\266\347\273\204\344\273\266/parent.vue"
@@ -0,0 +1,31 @@
+<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