vue3

15.vue3/project1/src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Demo15/>
+    <Demo16 x='哈哈' a=1 b=2  />
   <!-- 
     <Demo1 />
     <Demo2 />
@@ -15,6 +15,7 @@
     <Demo11/>
     <Demo12/>
     <Demo13/>
+    <Demo15/>
   -->
   <!-- 
   <div> 
@@ -27,7 +28,8 @@
 </template>
 
 <script setup lang="ts" name="App">
-import { ref } from "vue";
+import { ref, reactive } from "vue";
+// import {PersonList} from '@/types/demo16'
 let today = ref(12);
 
 let flower: any = ref(10);
@@ -35,7 +37,21 @@ let flower: any = ref(10);
 function show() {
   console.log(today.value, "flower");
 }
-
+// let list = []
+// let list = reactive([ 
+//   {
+//     name: "孙悟空",
+//     age: 13,
+//     id:'12'
+    
+//   },
+//   {
+//     name: "豬八戒",
+//     age: 10,
+//     id:"123"
+    
+//   },
+// ])
 // import Demo1 from "./components/Demo1.vue";
 // import Demo2 from "./components/Demo2.vue";
 // import Demo3 from "./components/Demo3.vue";
@@ -50,6 +66,7 @@ function show() {
 // import Demo12 from "./components/Demo12.vue";
 // import Demo13 from "./components/Demo13.vue";
 // import Demo14 from "./components/Demo14.vue";
-import Demo15 from "./components/Demo15.vue";
+// import Demo15 from "./components/Demo15.vue";
+import Demo16 from "./components/Demo16.vue";
 </script>
 <style lang="scss" scoped></style>

15.vue3/project1/src/components/Demo16.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <h3>props</h3>
+    <!-- <p>{{x}}--{{a}}--{{b}}</p> -->
+    <!-- <p>{{list1}}</p> -->
+    <ul>
+      <li v-for="(item,index) in list1" :key='index'>
+        {{ item.name }}--{{item.age}}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang='ts' name='Demo16'>
+import { ref, withDefaults} from 'vue'
+import {PersonList} from '@/types/demo16'
+
+// 只是单纯的接受 
+// defineProps(['x','a','b','list1'])
+
+// 限制类型
+// defineProps<{list1:PersonList}>();
+
+// let msg = defineProps<{list1:PersonList}>()
+
+// console.log(msg.list1)
+// 限制类型 + 限制必传 + 默认值
+withDefaults(defineProps<{list1?:PersonList}>(),{
+  list1:()=>[{id:"333",name:"唐僧",age:30}]
+})
+
+</script>
+<style lang='scss' scoped>
+
+</style>

15.vue3/project1/src/types/demo16.ts

@@ -0,0 +1,7 @@
+export interface Person {
+    id:string,
+    name:string,
+    age:number
+}
+
+export type PersonList = Array<Person>