vue3

17.Vue3/project/src/App.vue

@@ -28,6 +28,9 @@ export default {
 <template>
   <div>
     <h1>首页</h1>
+    <Demo17></Demo17>
+    <hr>
+    <hr>
     <Demo16></Demo16>
     <hr>
     <hr>
@@ -78,7 +81,7 @@ export default {
 </template>
 
 <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';
@@ -95,6 +98,7 @@ import Demo13 from './components/Demo13.vue';
 import Demo14 from './components/Demo14.vue';
 import Demo15 from './components/Demo15.vue';
 import Demo16 from './components/Demo16.vue';
+import Demo17 from './components/Demo17.vue';
 // export default {
 //   // components:{
 //   //   Demo1
@@ -107,6 +111,15 @@ onMounted(()=>{
   console.log(flower.value.vase)
   console.log(flower.value.num)
 })
+let news = reactive([
+  {
+    id:1,
+    name:"孙悟空"
+  },{
+    id:2,
+    name:"猪八戒"
+  }
+])
 </script>
 
 <style lang="scss" scoped>

17.Vue3/project/src/components/Demo17.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <h1>传参:Props</h1>
+    <ul v-for="(item,index) in aa.new1" :key="index">
+        <li>{{ item.name }}</li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive,defineProps,withDefaults} from "vue" 
+interface p1 {
+    id: number,
+    name: string
+}
+// 1.传什么 接什么
+// defineProps(['sex']);
+// 2.规定传入类型
+// defineProps({
+//     sex1: String
+// })
+// 3.规定是否是必须传入及是否是默认值
+const aa = withDefaults(defineProps<{
+    new1:p1[]
+}>(),{
+    // sex1:'xx',
+   new1:()=>[{id:3,name:'唐僧'}]
+})
+console.log(aa,'aa')
+// withDefaults(defineProps<{
+//     // 类型
+// }>(),{
+//     // 默认字段
+// })
+</script>
+
+<style lang="scss" scoped>
+</style>