vue3

20.vue3/project1/src/App.vue

@@ -3,7 +3,9 @@
     <h1>App</h1>
     <hr>
     <hr>
-    <Demo16 v-if="isShow"></Demo16>
+    <Demo17 ref="dom1"></Demo17>
+    <button @click="changeMain">获取</button>
+    <!-- <Demo16 v-if="isShow"></Demo16> -->
     <!-- <hr>
     <hr>
     <Demo8></Demo8>
@@ -41,9 +43,14 @@
 // import Demo7 from './components/Demo7.vue'
 // import Demo8 from './components/Demo8.vue'
 // import Demo9 from './components/Demo9.vue'
-import Demo16 from './components/Demo16.vue';
+// import Demo16 from './components/Demo16.vue';
+import Demo17 from './components/Demo17.vue';
 import { ref } from 'vue';
 let isShow = ref(true);
+let dom1 = ref();
+const changeMain = () => {
+  console.log(dom1.value)
+}
 </script>
 
 <style lang="scss" scoped>

20.vue3/project1/src/components/Demo17.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <h1>Demo17</h1>
+    <input type="text" ref="aa">
+    <h1 ref="bb">哈哈哈</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive, onMounted, watch} from "vue" 
+let aa = ref();
+let bb = ref();
+let a = ref(12);
+let b = reactive({
+    name:'图图',
+    age: 3
+})
+onMounted(() => {
+console.log(bb.value,'bb')
+})
+watch(aa,(val) => {
+    console.log(val,'val')
+},{
+    deep: true,
+    immediate: true
+})
+defineExpose({a,b})
+</script>
+
+<style lang="scss" scoped>
+</style>