标签的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>