vue3

vue3/project3/src/App.vue

@@ -13,11 +13,14 @@
     <Demo9></Demo9> -->
      <!-- <Demo14 v-if="isshow"></Demo14> -->
      <!-- <Demo23></Demo23> -->
-     <Demo24 ref="main"></Demo24>
+     <!-- <Demo24 ref="main"></Demo24> -->
     <!-- <Demo10></Demo10>
     <Demo11></Demo11>
     <Demo12></Demo12>
     <Demo13></Demo13> -->
+    <!-- <Demo25 :name="name1" :age="10"/>
+    <Demo25 :list1="list"/> -->
+    <Demo25/>
   </div>
 </template>
 
@@ -39,7 +42,7 @@ export default {
 </script> -->
 
 <script lang="ts" setup>
-import { ref,onMounted } from "vue";
+import { ref,onMounted, reactive } from "vue";
 import Demo1 from "./components/Demo1.vue";
 import Demo2 from './components/Demo2.vue';
 import Demo3 from './components/Demo3.vue';
@@ -61,12 +64,28 @@ import Demo18 from './components/Demo18.vue';
 import Demo19 from './components/Demo19.vue';
 import Demo23 from './components/Demo23.vue';
 import Demo24 from './components/Demo24.vue';
+import Demo25 from './components/Demo25.vue';
 let isshow  = ref(true);
 let main = ref<any>(null);
-onMounted(() => {
-  console.log(main.value.a)
-  console.log(main.value.b)
-}) 
+// onMounted(() => {
+//   console.log(main.value.a)
+//   console.log(main.value.b)
+// }) 
+let name1 = ref<string>("孙悟空")
+interface Person {
+  name1:string,
+  age1:number
+}
+let list:Person[] = reactive([{
+  name1:"小红",
+  age1:10
+},{
+  name1:"小黄",
+  age1:20
+},{
+  name1:"小粉",
+  age1:15
+}])
 
 </script>
 <style>

vue3/project3/src/components/Demo25.vue

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <h1>defineProps</h1>
+    <ul>
+        <li v-for="(item,index) in list1" :key="index">
+            我叫{{ item.name1 }},今年{{ item.age1 }}岁
+        </li>
+    </ul>
+    我叫{{ name }},今年{{ age }}岁
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive} from "vue" 
+// defineProps
+// 1.传什么接什么
+// defineProps(['list1'])
+// 2.规定接受类型
+// defineProps({
+//     name:String,
+//     age:Number
+// })
+
+interface Person {
+  name1:string,
+  age1:number
+}
+// 3.是否必传+展示默认
+withDefaults(defineProps<{
+    list1?:Person[],
+    name?:string,
+    age?:number
+}>(),{
+    name:'未知用户',
+    age:100,
+    list1:()=>{return[{name1:'q',age1:12}]}
+})
+</script>
+
+<style lang="scss" scoped>
+</style>