vue3

13.Vue3/project2/src/App.vue

@@ -14,12 +14,17 @@
     <Demo11/>-->
     <Demo12/>
     <Demo13 v-if='show'/>
+    <Demo14 ref="flower" />
   </div>
 </template>
 
 <script setup name="App">
-import {ref} from 'vue';
+import {ref,onMounted} from 'vue';
 let show = ref(true)
+let flower = ref(null)
+onMounted(()=>{
+  console.log(flower.value)
+})
 // import Demo1 from './components/Demo1.vue'
 // import Demo2 from './components/Demo2.vue'
 // import Demo3 from './components/Demo3.vue'
@@ -33,6 +38,7 @@ import Demo10 from './components/Demo10.vue'
 import Demo11 from './components/Demo11.vue'
 import Demo12 from './components/Demo12.vue'
 import Demo13 from './components/Demo13.vue'
+import Demo14 from './components/Demo14.vue'
 // vue2 选项式API => Option API
 // Vue3 组合式API => component API
 // export default {

13.Vue3/project2/src/components/Demo14.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <!-- <p ref='aa'>哈哈哈</p>
+    <button @click='getMain'>獲取</button> -->
+    <h1>你好</h1>
+    <input type="text" ref="inputRef">
+  </div>
+</template>
+
+<script setup>
+import {ref,onMounted} from 'vue';
+let inputRef = ref(null);
+let a = ref(1);
+let b = ref(2);
+onMounted(()=>{
+    // 失焦 blur
+    // 聚焦 focus
+    console.log(inputRef.value)
+    inputRef.value.focus();
+    setInterval(()=>{
+        inputRef.value.blur()
+    },3000)
+})
+defineExpose({a,b})
+</script>
+// <script>
+// export default {
+//     methods:{
+//         getMain () {
+//             console.log(this.$refs.aa)
+//         }
+//     }
+// }
+// </script>
+<style lang='scss' scoped>
+
+</style>