vue3

13.Vue3/project2/src/App.vue

@@ -12,20 +12,35 @@
     <Demo9/> 
     <Demo10/>
     <Demo11/>-->
-    <Demo12/>
+    <!-- <Demo12/>
     <Demo13 v-if='show'/>
     <Demo14 ref="flower" />
-    <Demo15/>
+    <Demo15/> -->
+    <Demo16  />
   </div>
 </template>
 
 <script setup name="App">
-import {ref,onMounted} from 'vue';
+import {ref,onMounted,reactive} from 'vue';
 let show = ref(true)
 let flower = ref(null)
 onMounted(()=>{
   console.log(flower.value)
 })
+let score = reactive([
+  {
+    name:"小红",
+    grad: 70
+  },
+  {
+    name:"小白",
+    grad: 30
+  },
+  {
+    name:"小蓝",
+    grad: 20
+  }
+])
 // import Demo1 from './components/Demo1.vue'
 // import Demo2 from './components/Demo2.vue'
 // import Demo3 from './components/Demo3.vue'
@@ -41,6 +56,7 @@ 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 Demo16 from './components/Demo16.vue'
 // vue2 选项式API => Option API
 // Vue3 组合式API => component API
 // export default {

13.Vue3/project2/src/components/Demo16.vue

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <h1>
+        Props
+    </h1>
+    <p>我叫{{name}},喜欢{{hobby}}</p>
+    <p>
+        {{score}}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive,withDefaults,defineProps} from 'vue'
+import  { aaList} from '../types/demo16.ts';
+// 1.传什么 接什么
+// defineProps(['name','hobby']);
+// let score:aaList = reactive([
+//   {
+//     name:"小红",
+//     grad: 70
+//   },
+//   {
+//     name:"小白",
+//     grad: 30
+//   },
+//   {
+//     name:"小蓝",
+//     grad: 20
+//   }
+// ])
+// 2.规定类型
+// defineProps({
+//     name:string,
+//     hobby:string
+// })
+// const props = defineProps<{score:aaList,name:string,hobby:string}>()
+// console.log(props.score,'props')
+// 3.是否必传 + 默认
+// defineProps([])
+const props = withDefaults(defineProps<{score:aaList,name:string,hobby:string}>(), {
+  name:'未知用户',
+  hobby: '吃饭',
+  score:[{name:'胡',grad:0}]
+})
+</script>
+<style lang='scss' scoped>
+
+</style>

13.Vue3/project2/src/types/demo16.ts

@@ -0,0 +1,6 @@
+export interface list1 {
+    name:string,
+    grad: number
+};
+
+export type aaList = list1[]