.

qwh5/package.json

@@ -29,4 +29,4 @@
     "postcss-px-to-viewport": "^1.1.1",
     "typescript": "~4.5.5"
   }
-}
+}

qwh5/src/components/TestCom.vue

@@ -0,0 +1,25 @@
+<template>
+    <div>
+        <h2> 你好-我是肖鹤云</h2>
+        <p>性别:{{ sex}}</p>
+        <p>其他信息:{{ info}}</p>
+        <button @click="updateRvent">更改</button>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from "vue";
+let sex=ref('男')
+let info=reactive({
+    like:'喜欢李诗晴',
+    age:27
+})
+const updateRvent = ():void =>{
+  info.age=29
+}
+// 将组件中的属性暴露出去，这样父组件可以获取
+defineExpose({
+    sex,
+    info
+})
+</script>

qwh5/src/components/tag.vue

@@ -11,9 +11,10 @@
 <script lang="ts" setup>
 import { Toast } from 'vant';
 import { onBeforeMount, ref, reactive, getCurrentInstance } from 'vue';
-  const emits= defineEmits<{///*ts专有*/
-    (e: 'closeTag', num: number): void
-  }>()
+  const emits = defineEmits(['closeTag'])
+  // const emits= defineEmits<{///*ts专有*/
+  //   (e: 'closeTag', num: number): void
+  // }>()
   const props = defineProps({
     labelList :{
       type: Array,

qwh5/src/router/index.ts

@@ -8,11 +8,6 @@ const routes: Array<RouteRecordRaw> = [
     component: () => import(/*webpackChunkName:"demo" */ '@/views/demo.vue')
   },
   {
-    path: '/agreement',
-    name: 'agreement',
-    component: () => import(/*webpackChunkName:"agreement" */ '@/views/agreement.vue')
-  },
-  {
     path: '/',
     name: 'home',
     component: HomeView

qwh5/src/shims-vue.d.ts

@@ -1,5 +1,4 @@
 /* eslint-disable */
-// import {DefineComponent} from "vue";
 declare module '*.vue' {
   import { DefineComponent } from 'vue'
   const component: DefineComponent<{}, {}, any>

qwh5/src/utils/axios.ts

@@ -107,7 +107,7 @@ export default {
    * @param {Object} data 
    * @returns Promise
    */
-  post(url, data, errToast?: any) {
+  post(url: string, data?: object, errToast?: any) {
     let ksort_data: any = ksort(data);
     let str = '';
     for (let i in ksort_data) {
@@ -138,7 +138,7 @@ export default {
     })
   },
 
-  get(url, data, errToast?: any) {
+  get(url: string, data?: object, errToast?: any) {
     let ksort_data: any = ksort(data);
     let str = '';
     for (let i in ksort_data) {

qwh5/src/views/demo.vue

@@ -1,52 +1,18 @@
 <template>
-  <div id="test">
-    <h3>{{a}}</h3>
-    <button @click="handleClick">更改</button>
+  <div class="home">
+    <test-com ref="testcomRef"></test-com>
+    <button @click="getSonHander">获取子组件中的数据</button>
   </div>
 </template>
-
-<script>
-import {
-  ref,
-  onMounted,
-  onBeforeMount,
-  onBeforeUpdate,
-  onUpdated,
-  onBeforeUnmount,
-  onUnmounted,
-} from "vue";
-export default {
-  // 初始化数据阶段的生命周期，介于beforeCreate和created之间
-  setup() {
-    const a = ref(0);
-    console.log("👌");
-    function handleClick() {
-      a.value += 1;
-    }
-    onBeforeMount(() => {
-      console.log("组件挂载之前");
-    });
-    onMounted(() => {
-      console.log("DOM挂载完成");
-    });
-    onBeforeUpdate(() => {
-      console.log("DOM更新之前", document.getElementById("test").innerHTML);
-    });
-    onUpdated(() => {
-      console.log("DOM更新完成", document.getElementById("test").innerHTML);
-    });
-    onBeforeUnmount(() => {
-      console.log("实例卸载之前");
-    });
-    onUnmounted(() => {
-      console.log("实例卸载之后");
-    });
-    return { a, handleClick };
-  }
-};
-</script>
-
-作者：前端开发小马哥
-链接：https://juejin.cn/post/7057325585705467918
-来源：稀土掘金
-著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
+<script lang="ts" setup>
+import TestCom from "../components/TestCom.vue"
+import {ref,onMounted} from 'vue'
+const testcomRef = ref()
+const getSonHander=()=>{
+  console.log('获取子组件中的性别', testcomRef.value.sex );
+  console.log('获取子组件中的其他信息', testcomRef.value.info );
+}
+onMounted(()=>{
+  getSonHander()
+})
+</script>

qwh5/tsconfig.json

@@ -3,16 +3,16 @@
     "declaration": true,
     "target": "esnext",
     "module": "esnext",
-    "strict": false,
+    "strict": false,//启用所有严格类型检查选项。
     "jsx": "preserve",
     "moduleResolution": "node",
     "experimentalDecorators": true,
-    "skipLibCheck": true,
+    "skipLibCheck": true,//忽略所有的声明文件（ *.d.ts）的类型检查。
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "forceConsistentCasingInFileNames": true,
     "useDefineForClassFields": true,
-    "sourceMap": true,
+    "sourceMap": true,//生成相应的 .map文件。
     "baseUrl": ".",
     "types": [
       "webpack-env"