025:尚硅谷对props的使用学习示例

src/App.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="app">
         <h1>Hello World,你好呀!</h1>
+        <Person :list="personsList"/>
 
     </div>
 
@@ -9,6 +10,17 @@
     </template>
 
     <script setup lang="ts">
+    import Person from './components/Person.vue';
+        import { type Persons } from '@/types'
+        import { reactive } from 'vue';
+
+        let personsList = reactive<Persons>([
+            { name: '张三', age: 20,id:'sdadfgagfs01' },
+            { name: '李四', age: 21,id:'sdadfgagfs02' },
+            { name: '王五', age: 22,id:'sdadfgagfs03' },
+            { name: '赵六', age: 23,id:'sdadfgagfs04' },
+            { name: '田七', age: 24,id:'sdadfgagfs05' },
+        ])
 
         
     </script>

src/components/Person.vue

@@ -1,6 +1,14 @@
 <template>
 <div class="person">
 <h1>ref属性标签示例</h1>
+<button @click="log">输出接收到的对象</button>
+<ul>
+    <li v-for="item in list" :key="item.id">
+        <span>{{item.name}}</span>
+        <span>-----{{item.age}}</span>
+        <span>-----{{item.id}}</span>
+    </li>
+</ul>
 
 
 
@@ -13,18 +21,17 @@
     
     <script setup lang="ts">
     
-    import {type PersonInter, type Persons } from '@/types'
+    import type { Persons } from '@/types';
+import { defineProps } from 'vue';
 
-
-    let person:PersonInter = {name:'张三',age:20,id:'asyud7asfd01'}
+    withDefaults(defineProps<{list?:Persons}>(),{list:()=>[{name:'张三',age:20,id:'sdadfgagfs01'}]})
+    function log(){
+        console.log('接收到的对象:');
+    }
     
-    let personList:Persons = [{name:'张三',age:20,id:'asyud7asfd01'},
-                                        {name:'李四',age:21,id:'asyud7asfd02'},
-                                        {name:'王五',age:22,id:'asyud7asfd03'}
-                    ]
 
     </script>
-
+