vue3

16.vue3/project1/src/App.vue

@@ -2,7 +2,9 @@
   <div>
     <hr />
     <hr />
-    <Demo11></Demo11>
+    <Demo12 ref="main"></Demo12>
+    <button @click="getMain">展示</button>
+
     <hr />
     <hr />
     <!-- <Demo7></Demo7>
@@ -28,6 +30,7 @@
 </template>
 
 <script setup>
+import { ref, reactive } from "vue";
 // import Demo1 from "./components/Demo1.vue";
 // import Demo2 from "./components/Demo2.vue";
 // import Demo3 from "./components/Demo3.vue";
@@ -39,6 +42,11 @@
 // import Demo9 from "./components/Demo9.vue";
 // import Demo10 from "./components/Demo10.vue";
 import Demo11 from "./components/Demo11.vue";
+import Demo12 from "./components/Demo12.vue";
+let main = ref();
+function getMain() {
+  console.log(main.value);
+}
 </script>
 
 <style lang="scss" scoped>

16.vue3/project1/src/components/Demo12.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <h1>Demo12</h1>
+    <p ref="a">你好啊</p>
+    <button @click="getMain">点击</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from "vue";
+let a = ref();
+let num = ref(20);
+let q = ref(222);
+const getMain = () => {
+  console.log(a.value);
+};
+defineExpose({ num, q });
+</script>
+
+<style lang="scss" scoped>
+</style>