標簽的ref屬性

vue3和vue2中的ref屬性：
用在普通DOM標簽上，獲取的是DOM節點
ref用在組件標簽上，獲取的是組件實例對象
區別在于：
1.vue3中person子組件中的數據父組件App不能直接使用，需要引入并使用defineExpose才可以；
vue2中person子組件中的數據父組件App可直接使用。
2.vue2中獲取節點：
<h2 ref="title">重慶</h2>
this.$refs.title
vue2中獲取組件實例對象：
<Person ref="per"/>
this.$refs.per
3.vue3中的獲取語法見以下代碼：

<template><div class="app"><h2>大理</h2><h2 ref="title">重慶</h2><h2>大西北</h2><button @click="getDOM">點我獲取節點</button></div>
</template><script lang="ts" setup name="Person">//知識點：標簽的ref屬性    用于獲取DOM元素或者組件實例對象時使用// 要求一：獲取重慶這條信息的DOM節點import { ref,defineExpose } from "vue"let title=ref()function getDOM(){console.log(title.value)}// 要求二：獲取組件實例對象（代碼見App組件）// 要求三：在person組件里添加一些數據// 解析：在vue3中，person組件中的數據App組件如果想要使用需要引入并使用defineExpose才可以。(defineExpose也可以不引用，直接使用)let a= ref(0)let b= ref(1)let c= ref(2)defineExpose({a,b,c})   //這樣父組件就獲取到了person里的數據
</script>

App.vue組件

<template><Person ref="per"/><button @click="getPerson">點我獲取person組件實例</button>
</template><script lang="ts" setup name="App">import Person from "./components/Person.vue"  // 只需引入，不用注冊組件，vue3引入之后會自動注冊import {ref} from "vue"// 要求二：獲取組件實例對象let per=ref()function getPerson(){console.log(per.value)} 
</script>

TS接口、泛型、自定義類型

**作用：**提升代碼的可靠性、可維護性和開發效率

<template><div class="app"><h2>{{ person.name }}</h2><h2>{{ personlist[1].name }}</h2></div>
</template><script lang="ts" setup name="Person">
import {type personInter,type persons} from "../types"
// TS的接口、泛型、自定義類型    // 作用：給代碼設置一定的約束，防止出錯// 知識點一：TS的接口   
// ====================================================================//要求一：給person對象設置一定的約束//首先創建types文件夾，定義接口 let person:personInter={id:"asycs01",name:"李華",age:18}// 這樣使用接口之后，如果打錯單詞或者屬性類型會給提示// ====================================================================// 知識點二：TS的泛型  <>//要求二：給personlist數組設置一定的約束let personlist:Array<personInter>=[{id:"asycs01",name:"李華",age:18},{id:"asycs02",name:"小明",age:20},{id:"asycs03",name:"小紅",age:21}]// ====================================================================// 知識點三：TS的自定義類型  <>//要求三：基于要求二的高級寫法（見index.ts）let personlist1:persons=[{id:"asycs01",name:"李華",age:18},{id:"asycs02",name:"小明",age:20},{id:"asycs03",name:"小紅",age:21}]
// ====================================================================// 知識點四：需要使用reactive時的寫法：//要求四：要將數組中的數據變為響應式的數據let personlist2=reactive<persons>([{id:"asycs01",name:"李華",age:18},{id:"asycs02",name:"小明",age:20},{id:"asycs03",name:"小紅",age:21}])
</script>

types/index.ts:

// 定義接口
export interface personInter{id:string,name:string,age:number,gender?:string   //當想要給某一個對象添加性別時這樣寫，但如果寫成gender:string就要給每一個屬性都添加gender
}
// export type persons=Array<personInter>
export type persons=personInter[]

父親給兒子傳遞參數

App.vue

<template><Person :personList="personList"/>
</template><script lang="ts" setup name="App">import Person from "./components/Person.vue"// 只需引入，不用注冊組件，vue3引入之后會自動注冊import {type persons} from "./types"import {reactive} from "vue"let personList=reactive<persons>([{id:"asycs01",name:"李華",age:18},{id:"asycs02",name:"小明",age:20},{id:"asycs03",name:"小紅",age:21}])</script>

Person.vue

<template><div class="app"><ul><li v-for="item in personList" :key="item.id">{{ item.name }}</li></ul></div>
</template><script lang="ts" setup name="Person">
import {type persons} from "../types"
import { withDefaults } from "vue";
// ===========================================================
//知識點一：defineProps 接收數據// 要求一：將App中的數據傳遞給Person// defineProps(["personList"])// ===========================================================//知識點二：defineProps 接收數據并限制接收數據的類型// defineProps<{personList:persons}>()  // {}中第一個參數是接收的對象，第二個參數是接口規范// ===========================================================//知識點三：defineProps 接收數據并限制接收數據的類型并限制必要性// defineProps<{personList?:persons}>() // ===========================================================//知識點三：defineProps 接收數據并限制接收數據的類型并限制必要性withDefaults(defineProps<{personList?:persons}>(),{personList:()=>[{id:"asycs01",name:"李華",age:18},{id:"asycs02",name:"小明",age:20}]})
</script>