外部引入ts

src/App.vue

@@ -1,11 +1,29 @@
-<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>
+  <dev>
+    <p>姓名：<input v-model="userName" /></p>
+    <p>薪水：<input v-model="salary" /></p>
+    <button @click="zhanggongzi">涨工资</button>
+    <button @click="kougongzi"">扣工资</button>
+  </dev>
+
+  <hr />
+
+  <dev>
+    <p>姓名：<input v-model="mySalary.userName" /></p>
+    <p>薪水：<input v-model="mySalary.salary" /></p>
+    <button @click="mySalary.zhanggongzi">涨工资</button>
+    <button @click="mySalary.kougongzi">扣工资</button>
+  </dev>
+
 </template>
 
+<script setup lang="ts">
+import { reactive } from 'vue'
+import MySalary from '@/components/MySalary'
+
+let {userName, salary, zhanggongzi, kougongzi} = MySalary()
+const mySalary = reactive(MySalary())
+
+</script>
+
 <style scoped></style>