vue3

vue3/my_project/src/App.vue

@@ -1,7 +1,11 @@
 <template>
    <div id="app">
     <!-- html -->
-    <Demo7></Demo7>
+    <Demo9></Demo9>
+    <!-- <h2 ref="address">哈尔滨</h2>
+    <button @click="getMain">获取</button>
+    <Demo8 ref="haha"></Demo8> -->
+    <!-- <Demo7></Demo7> -->
     <!-- <Demo6></Demo6> -->
     <!-- <Demo5></Demo5> -->
     <!-- <Demo4></Demo4> -->
@@ -13,6 +17,8 @@
 </template>
 
 <script>
+import Demo9 from './components/Demo9.vue'
+import Demo8 from './components/Demo8.vue'
 import Demo7 from './components/Demo7.vue'
 import Demo6 from './components/Demo6.vue'
 import Demo5 from './components/Demo5.vue'
@@ -31,10 +37,21 @@ export default {
         // Demo4,
         // Demo5,
         // Demo6,
-        Demo7,
+        // Demo7,
+        Demo8,
+        Demo9
     },
 }
 </script>
+<script setup>
+    import {ref} from 'vue';
+    let address = ref();
+    let haha = ref();
+    function getMain() {
+        // console.log(address.value,'app页')
+        console.log(haha.value,'app')
+    }
+</script>
 
 <style scoped>
  /* 样式 */

vue3/my_project/src/components/Demo8.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="demo8">
+    <h2 ref="address">北京</h2>
+    <button @click="getAddress">获取地址</button>
+  </div>
+</template>
+
+<script lang="ts" setup name="Demo8">
+import {ref} from 'vue'
+import { defineExpose } from 'vue';
+let address = ref();
+let a = ref(1);
+let b = ref(2);
+let c = ref(3);
+function getAddress() {
+    console.log(address.value,'demo8')
+}
+// 抛出父组件允许获取的值 
+defineExpose({a,b,c,address})
+</script>
+
+<style></style>

vue3/my_project/src/components/Demo9.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="demo9">
+    <!-- 回顾ts -->
+    ???
+  </div>
+</template>
+
+<script setup lang="ts" name="Demo9">
+import { PersonFace, Message } from "../types/Demo9";
+// 接口
+let person: PersonFace = {
+  name: "张三",
+  age: 18,
+  sex: "男"
+};
+
+let personList:Message = [
+    {id:1,name:"张三",age:10,hobby:"吃饭"},
+    {id:12,name:"李四",age:20,hobby:"睡觉"},
+    {id:21,name:"王五",age:30,hobby:"打豆豆"},
+    {id:31,name:"赵六",age:40,hobby:"喝水"}
+]
+
+
+</script>
+
+<style></style>

vue3/my_project/src/types/Demo9.ts

@@ -0,0 +1,15 @@
+export interface PersonFace {
+  name: string;
+  age: number;
+  sex: string;
+}
+
+interface myInter {
+    id: number,
+    name: string,
+    age: number,
+    hobby: string,
+}
+
+// export type Message = myInter[];
+export type Message = Array<myInter>;