vue3

12.vue3/project1/src/App.vue

@@ -1,7 +1,9 @@
 <template>
   <div>
-    <Demo12></Demo12>
+    <Demo13 x="你好" :open="showList"></Demo13>
     <hr><hr><hr>
+    <!-- <Demo12></Demo12>
+    <hr><hr><hr> -->
     <!-- <Demo11></Demo11>
     <hr><hr><hr> -->
     <!-- <Demo10></Demo10>
@@ -39,6 +41,23 @@ import Demo9 from './components/Demo9.vue';
 import Demo10 from './components/Demo10.vue';
 import Demo11 from './components/Demo11.vue';
 import Demo12 from './components/Demo12.vue';
+import Demo13 from './components/Demo13.vue';
+import { reactive } from 'vue';
+
+let showList = reactive([
+   {
+    name: 12,
+    age: 3,
+  },
+  {
+    name: "孙悟空",
+    age: 23,
+  },
+  {
+    name: "哪吒",
+    age: 7,
+  },
+])
 </script>
 
 <style>

12.vue3/project1/src/components/Demo13.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <h1>Props</h1>
+    <h2>展示:{{ x }}</h2>
+    <ul>
+        <li v-for="(item,index) in open" :key="index">
+            {{ item.name }}--{{ item.age }}
+        </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive,withDefaults} from "vue" 
+import {type aa } from "@/types/7";
+// 单纯的接受值
+// defineProps(['x','open'])
+// 限制类型
+defineProps<{open:aa}>();
+// 默认值
+// withDefaults(defineProps<{open:aa,x:number}>(),{
+//   open:()=>[{name:"喜羊羊",age:7}],
+//   x:12
+
+// })
+</script>
+
+<style lang="scss" scoped>
+</style>