vue3

16.vue3/project1/src/App.vue

@@ -2,7 +2,8 @@
   <div>
     <hr />
     <hr />
-    <Demo13 v-if="show"></Demo13>
+    <Demo14 :news="person"></Demo14>
+    <!-- <Demo13 v-if="show"></Demo13> -->
     <!-- <Demo12 ref="main"></Demo12>
     <button @click="getMain">展示</button> -->
 
@@ -30,7 +31,7 @@
   </div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { ref, reactive } from "vue";
 // import Demo1 from "./components/Demo1.vue";
 // import Demo2 from "./components/Demo2.vue";
@@ -44,12 +45,40 @@ import { ref, reactive } from "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 Demo13 from "./components/Demo13.vue";
+import Demo14 from "./components/Demo14.vue";
+
+interface x {
+  name: string;
+  age: number;
+}
 let main = ref();
+
 function getMain() {
   console.log(main.value);
 }
 let show = ref(true);
+let ww = reactive<{
+  desc: string;
+  num: string;
+}>({
+  desc: "图图",
+  num: "30",
+});
+let person = reactive<x[]>([
+  {
+    name: "图图",
+    age: 3,
+  },
+  {
+    name: "孙悟空",
+    age: 500,
+  },
+  {
+    name: "猪八戒",
+    age: 400,
+  },
+]);
 </script>
 
 <style lang="scss" scoped>

16.vue3/project1/src/components/Demo14.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <h1>Demo14</h1>
+    <ul>
+      <li v-for="(item, index) in props.news" :key="index">
+        {{ item.name }}--{{ item.age }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, withDefaults } from "vue";
+// const props = defineProps(["news"]);
+interface aa {
+  name: string;
+  age: number;
+}
+// const props = defineProps<{ news: aa[] }>();
+const props = withDefaults(defineProps<{ news: aa[] }>(), {
+  news: () => [{ name: "小猪佩奇", age: 3 }],
+});
+console.log(props.news);
+</script>
+
+<style lang="scss" scoped>
+</style>