From cf9a4c7f0d77b5e4aee4d89ddfe033ff4afd2115 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=91=E4=B8=8A=E8=B4=B5=E7=8C=AA?= <290425385@qq.com>
Date: Fri, 2 May 2025 21:02:47 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BD=BF=E7=94=A8=20toRefs=20=E8=AE=A9?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=8F=98=E4=B8=BA=E5=93=8D=E5=BA=94=E5=BC=8F?=
 =?UTF-8?q?=E7=9A=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .idea/workspace.xml       | 17 +++++++++++++----
 src/App.vue               |  2 +-
 src/components/Person.vue | 26 ++++++++++++++++++++++----
 3 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 2e64a70..95df4b0 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,7 +4,7 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="82d74fc6-f54a-4255-8e7b-990e62fbaaf1" name="更改" comment="ref、修改对象传入更新数据问题">
+    <list default="true" id="82d74fc6-f54a-4255-8e7b-990e62fbaaf1" name="更改" comment="defineProps，实现简单的父传子">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/App.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.vue" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/components/Person.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Person.vue" afterDir="false" />
@@ -59,7 +59,7 @@
       <option name="presentableId" value="Default" />
       <updated>1745919613888</updated>
       <workItem from="1745919615396" duration="326000" />
-      <workItem from="1746189663982" duration="191000" />
+      <workItem from="1746189663982" duration="1161000" />
     </task>
     <task id="LOCAL-00001" summary="Merge remote-tracking branch 'vue3-学习仓库/dev' into dev&#10;&#10;# Conflicts:&#10;#&#9;.idea/workspace.xml&#10;#&#9;README.md&#10;#&#9;src/components/Person.vue">
       <option name="closed" value="true" />
@@ -117,7 +117,15 @@
       <option name="project" value="LOCAL" />
       <updated>1745934687740</updated>
     </task>
-    <option name="localTasksCounter" value="8" />
+    <task id="LOCAL-00008" summary="defineProps，实现简单的父传子">
+      <option name="closed" value="true" />
+      <created>1746189895108</created>
+      <option name="number" value="00008" />
+      <option name="presentableId" value="LOCAL-00008" />
+      <option name="project" value="LOCAL" />
+      <updated>1746189895108</updated>
+    </task>
+    <option name="localTasksCounter" value="9" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -143,6 +151,7 @@
     <MESSAGE value="reaction 对象的使用 v-for" />
     <MESSAGE value="使用 Object.assign() 合并对象（修改属性并更新页面），区别于ref、reactive不可更新数据问题" />
     <MESSAGE value="ref、修改对象传入更新数据问题" />
-    <option name="LAST_COMMIT_MESSAGE" value="ref、修改对象传入更新数据问题" />
+    <MESSAGE value="defineProps，实现简单的父传子" />
+    <option name="LAST_COMMIT_MESSAGE" value="defineProps，实现简单的父传子" />
   </component>
 </project>
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 52a886e..1283b1e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,7 +4,7 @@ import Person from "@/components/Person.vue";
 
 <template>
   <main>
-    <Person name="xxxx"/>
+    <Person/>
   </main>
 </template>
 
diff --git a/src/components/Person.vue b/src/components/Person.vue
index c4e29e0..755c569 100644
--- a/src/components/Person.vue
+++ b/src/components/Person.vue
@@ -1,16 +1,34 @@
 <script setup lang="ts">
-defineProps({
-  name:String,
+import {reactive, toRefs} from "vue";
+
+let person = reactive({
+  name:'张三',
+  age:18,
 })
 
+let {name,age} = toRefs(person)
+
+function changeName(){
+  //person.name = person.name + '~'
+  person.name += '~'
+}
+
+function changeAge(){
+  person.age +=1
+}
 </script>
 
 <template>
   <main>
-    <h1>名字是{{name}}</h1>
+    <h1>姓名：{{name}}</h1>
+    <h1>年龄：{{age}}</h1>
+    <button @click="changeName">修改名字</button>
+    <button @click="changeAge">年龄+1</button>
   </main>
 </template>
 
 <style scoped>
-
+button {
+  margin: 0 1rem;
+}
 </style>