《vue3学习手记3》
标签的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>