vue3

vue3/project3/src/App.vue

@@ -12,7 +12,8 @@
     <Demo8></Demo8>
     <Demo9></Demo9> -->
      <!-- <Demo14 v-if="isshow"></Demo14> -->
-     <Demo23></Demo23>
+     <!-- <Demo23></Demo23> -->
+     <Demo24 ref="main"></Demo24>
     <!-- <Demo10></Demo10>
     <Demo11></Demo11>
     <Demo12></Demo12>
@@ -37,8 +38,8 @@ export default {
 };
 </script> -->
 
-<script setup>
-import { ref } from "vue";
+<script lang="ts" setup>
+import { ref,onMounted } from "vue";
 import Demo1 from "./components/Demo1.vue";
 import Demo2 from './components/Demo2.vue';
 import Demo3 from './components/Demo3.vue';
@@ -59,7 +60,14 @@ import Demo17 from './components/Demo17.vue';
 import Demo18 from './components/Demo18.vue';
 import Demo19 from './components/Demo19.vue';
 import Demo23 from './components/Demo23.vue';
+import Demo24 from './components/Demo24.vue';
 let isshow  = ref(true);
+let main = ref<any>(null);
+onMounted(() => {
+  console.log(main.value.a)
+  console.log(main.value.b)
+}) 
+
 </script>
 <style>
 </style>

vue3/project3/src/components/Demo24.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <p ref="aaa">你好</p>
+    <input type="text" ref="inpRef">
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,onMounted} from "vue" 
+let aaa = ref<any>(null)
+let inpRef = ref<HTMLInputElement | null>(null);
+let a = ref<number>(1);
+let b = ref<number>(2);
+onMounted(()=>{
+    console.log(aaa.value)
+    console.log(inpRef.value)
+    setTimeout(()=>{
+        inpRef.value?.focus();
+    },2000)
+    setTimeout(()=>{
+        inpRef.value?.blur();
+    },4000)
+})
+defineExpose({a,b})
+</script>
+<!-- <script>
+    export default {
+        mounted() {
+            console.log(this.$refs.aaa)
+        }
+    }
+</script> -->
+<style lang="scss" scoped>
+</style>