vue3

20.vue3/project1/src/App.vue

@@ -3,8 +3,9 @@
     <h1>App</h1>
     <hr>
     <hr>
-    <Demo17 ref="dom1"></Demo17>
-    <button @click="changeMain">获取</button>
+    <Demo18 ></Demo18>
+    <!-- <Demo17 ref="dom1"></Demo17> -->
+    <!-- <button @click="changeMain">获取</button> -->
     <!-- <Demo16 v-if="isShow"></Demo16> -->
     <!-- <hr>
     <hr>
@@ -44,7 +45,8 @@
 // import Demo8 from './components/Demo8.vue'
 // import Demo9 from './components/Demo9.vue'
 // import Demo16 from './components/Demo16.vue';
-import Demo17 from './components/Demo17.vue';
+// import Demo17 from './components/Demo17.vue';
+import Demo18 from './components/Demo18.vue';
 import { ref } from 'vue';
 let isShow = ref(true);
 let dom1 = ref();

20.vue3/project1/src/components/Demo18.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <h1>Props</h1>
+    <h3>{{ props.a }}--{{ props.name }}</h3>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive} from "vue" 
+// 1.传什么 接什么
+// defineProps(['a','name'])
+// 2.规定类型
+// defineProps({
+//     name:String,
+//     a: Number
+// })
+// 3.默认值 + 规定类型 + 必传项
+const props = withDefaults(defineProps<{name?:string,a?:number}>(),{
+    name:'喜羊羊',
+    a:7
+})
+</script>
+
+<style lang="scss" scoped>
+</style>