vue3

11.vue3/vue-project1/src/App.vue

@@ -4,8 +4,9 @@
   <div>
     <h1>首页</h1>
     <!-- <Demo13 v-if="isShow"></Demo13> -->
-    <!-- <Demo15></Demo15> -->
-    <Demo14 ref="main"></Demo14>
+    <Demo16 ></Demo16>
+    <!-- <Demo15 ></Demo15 > -->
+    <!-- <Demo14 ref="main"></Demo14> -->
     <!-- <Demo12></Demo12> -->
     <!-- <Demo11></Demo11> -->
     <!-- <Demo10></Demo10> -->
@@ -20,7 +21,8 @@
     <Demo1></Demo1> -->
   </div>
 </template>
-<script setup name="App">
+<script setup name="App" lang="ts">
+import {type partList} from './types/demo16';
 import { onMounted, ref } from 'vue';
 import Demo1 from './components/Demo1.vue';
 import Demo2 from './components/Demo2.vue';
@@ -37,11 +39,29 @@ 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';
 let isShow = ref(true)
 let main = ref(null);
 onMounted(()=>{
   console.log(main.value)
 })
+let newList:partList = [
+  {
+    flower:"牡丹",
+    color:"红色",
+    num:10
+  },
+  {
+    flower:"水仙",
+    color:"白色",
+    num:7
+  },
+  {
+    flower:"玫瑰",
+    color:"蓝色",
+    num:30
+  },
+]
 </script>
 <style scoped>
 </style>

11.vue3/vue-project1/src/components/Demo15.vue

@@ -5,8 +5,31 @@
 </template>
 
 <script lang="ts" setup>
-import {ref,reactive} from "vue" 
+import { ref, reactive } from "vue";
+import { type list } from "../types/demo15.ts";
 
+// 函数的 泛型继承接口
+function fn1<T extends list>(x: T): T {
+  return x;
+}
+fn1({
+  id: 6,
+  name: "孙悟空",
+  age: 10,
+});
+let a:number;
+// a = '21';
+
+let newList: list[] = reactive([
+  {
+    id: 6,
+    name: "孙悟空",
+    age: 10,
+  },
+]);
+
+
+console.log(newList);
 </script>
 
 <style lang="scss" scoped>

11.vue3/vue-project1/src/components/Demo16.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <h1>Demo16</h1>
+    <h2>Props</h2>
+    <p>我叫:{{ name }}--今年{{ age }}</p>
+    <ul>
+      <li v-for="(item,index) in aa" :key="index">
+        {{ item.flower }}
+      </li>
+     </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, defineProps,withDefaults } from "vue";
+import {type partList} from '../types/demo16';
+// props:['name']
+// 1.传什么 接什么
+// defineProps(['name'])
+// defineProps(['aa'])
+// 2.规定类型
+// defineProps({
+//   name: String,
+//   age: Number,
+// });
+// 3.是否必传 + 默认
+let showMain = withDefaults(defineProps<{aa:partList,name:string,age:number}>(),{
+  name:"猪八戒",
+  age: 12,
+  aa:()=>[{flower:'菊花',color:'黄色',num:11}]
+  
+})
+console.log(showMain)
+
+
+</script>
+
+<style lang="scss" scoped>
+</style>

11.vue3/vue-project1/src/types/demo15.ts

@@ -0,0 +1,7 @@
+export interface list {
+    id:number,
+    name: string,
+    age: number
+}
+
+export type part = list[];

11.vue3/vue-project1/src/types/demo16.ts

@@ -0,0 +1,7 @@
+export interface list{
+    flower: string,
+    color: string,
+    num: number
+}
+
+export type partList = Array<list>