子组件

src/App.vue

@@ -1,11 +1,38 @@
-<script setup lang="ts"></script>
 
 <template>
-  <h1>You did it!</h1>
-  <p>
-    Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
-    documentation
-  </p>
+  <SalaryInfo ref="salaryInfo"></SalaryInfo>
+  <button @click="showSalary">查看薪水</button>
+  <button @click="zhanggongzi">涨工资</button>
+
+  <hr />
+
+  <StudentInfo :student-info="studentInfo"></StudentInfo>
 </template>
 
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import SalaryInfo from './components/MysalaryInfo.vue';
+import StudentInfo from './components/MystudentInfo.vue'
+
+let salaryInfo = ref()
+
+function showSalary(){
+  console.log(salaryInfo)
+  console.log(salaryInfo.value)
+  console.log(salaryInfo.value.userName)
+  console.log(salaryInfo.value.salary)
+}
+
+function zhanggongzi(){
+  salaryInfo.value.salary += 100
+}
+
+
+let studentInfo = reactive({
+  id:2405050505,
+  name:"wkn"
+})
+
+</script>
+
 <style scoped></style>

src/components/MysalaryInfo.vue

@@ -0,0 +1,27 @@
+
+<template>
+    <div>
+        姓名：<input v-model="userName" /> <br />
+        薪水：<input v-model="salary" />
+    </div>
+
+</template>
+
+<script lang="ts">
+    export default {
+        name:"SalaryInfo"
+    }
+</script>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const userName = ref('wkn')
+const salary = ref(12000)
+
+defineExpose({userName, salary})
+
+</script>
+
+
+<style scoped></style>

src/components/MystudentInfo.vue

@@ -0,0 +1,27 @@
+
+<template>
+    <div>
+        学号：<input v-model="studentInfo.id" /> <br />
+        姓名：<input v-model="studentInfo.name" />
+    </div>
+
+</template>
+
+<script lang="ts">
+    export default {
+        name:"StudentInfo" // 自定义一个组件名，没有则默认文件名
+    }
+</script>
+
+<script setup lang="ts">
+// ts泛型写法，带有类型检查
+import type { StudentInfo } from '@/types/salaryinfo';
+defineProps<{studentInfo:StudentInfo}>()
+
+// 普通写法，没有检查
+// defineProps(["studentInfo"])
+
+</script>
+
+
+<style scoped></style>

src/types/salaryinfo.ts

@@ -0,0 +1,4 @@
+export interface StudentInfo{
+    id:number,
+    name:string
+}