当前位置：首页 > news >正文

《vue3学习手记3》

news 来源：原创 2025/8/24 18:15:42

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

标签的ref属性

TS接口、泛型、自定义类型

父亲给儿子传递参数

相关文章：