使用 toRefs 让数据变为响应式的

.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>

src/App.vue

@@ -4,7 +4,7 @@ import Person from "@/components/Person.vue";
 
 <template>
   <main>
-    <Person name="xxxx"/>
+    <Person/>
   </main>
 </template>
 

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>