这节主要介绍:标签和组件的ref属性,父子组件间的传递值,ts的接口定义,vue3的生命周期
1.标签的ref属性。
1.1ref属性就是给标签打标识用的,相当于html的id,但是在vue3中用id可能会乱,下面是ref的使用。
打一个普通标签,并且将对象转为ref的响应式:
//1 ref是标识类似ID,获取标识的值 AAA
1.2给组件标记一个ref属性,并且实现 子组件 给 父组件传递数据。
子组件留意 defineExpose({a,b}); //让父组件看那个就交出去哪个,不交父组件就拿不到。
//子组件
父组件接收
//父组件中
2 .ts的接口定义
a.新建个文件夹types里面建立index.ts文档
定义了一个对象接口规范,后面定义这个对象都得按这个规范来(名称,类型).
export interface personInterface{ id:string, name:string, age:string }//定义对象接口规范并暴露出去
定义一个对象数组接口标准
//4定义个自定义类型(就是个数组) export type interface persons=Array//personInterface[]也行 //定义数组接口规范
ts定义这些的好处是在后面的使用中保证不会写错,都要准守的标准。
利用接口定义对象及数组对象:
//引入ts文件 @代表到根目录,如果是index可以不写 import {type personInterface,type persons} from '@/types/index.ts' //使用对象接口规范 如果你的属性及类型错了它会提示 let person:personInterface ={id:'001',name:'张三',age:20} //使用自定义数组规范 let personlist:persons=[{id:'001',name:'张三',age:20},,,]
3 利用上面的接口 父组件给子组件传递数据,保证了正确性。
父组件中:
//引入 import {type personInterface,type persons} from '@/type' //1父组件根据接口 定义对象数组 let personlist:persons=[{id:'001',name:'张三',age:20},{id:'002',name:'张4',age:23}] //2传递给子组件
子组件中:
//子组件 只接收 import{defineProps}from 'vue' let v=defineProps(['list']);//v.list;数组内可以是多个 {{list}}//html 可以直接使用 //子组件 接收+限制类型 告诉父组件我只要persons的值 defineProps()//这个list对应父组件写的参数名称,加?:可以不传 //子组件 接收+限制类型+默认值 //告诉父组件 我要一个persons类型的数组,若不给我就显示默认的值 import{withDefaults}from 'vue' withDefaults(defineProps
(),{ list:()=>[{id:'001',name:'张三',age:20}] }) 以上三种接收方式。
4 vue3的生命周期:
vue2生命周期
创建(创建前beforeCreate 创建完成created)
挂载(挂载前beforeMount 挂载完成mounted)
更新(更新前beforeUpdate 更新完成updated)//页面有更新才执行
销毁(销毁前beforeDestroy 销毁完成destroyed)
vue3生命周期
创建