Vue3_基础使用_2
这节主要介绍：标签和组件的ref属性，父子组件间的传递值，ts的接口定义，vue3的生命周期
1.标签的ref属性。
1.1ref属性就是给标签打标识用的，相当于html的id，但是在vue3中用id可能会乱，下面是ref的使用。
打一个普通标签，并且将对象转为ref的响应式：
//1 ref是标识类似ID,获取标识的值
<span ref='title1'>AAA</span>
<script lang="ts" setup>
let title1=ref();//变量要与html的ref相同
console.log(title1.value);
</script>1.2给组件标记一个ref属性，并且实现 子组件 给 父组件传递数据。
子组件留意 defineExpose({a,b}); //让父组件看那个就交出去哪个，不交父组件就拿不到。
//子组件
<script lang="ts" setup>
import{ref,defineExpose}from 'vue'
let a=ref(100);//声明一个响应式变量
let b=ref(200);
defineExpose({a,b});//让父组件看那个就交出去哪个
</script>父组件接收
//父组件中
<person ref='ren'/><!--给子组件标记ref属性-->
<script lang="ts" setup>
import{ref}from 'vue'
let ren=ref();//获取子组件
console.log(ren.value);//这里面有子组件给的数据
</script>2 .ts的接口定义
a.新建个文件夹types里面建立index.ts文档
定义了一个对象接口规范，后面定义这个对象都得按这个规范来（名称，类型）.
export interface personInterface{
id:string,
name:string,
age:string
}//定义对象接口规范并暴露出去定义一个对象数组接口标准
//4定义个自定义类型(就是个数组)
export type interface persons=Array<personInterface>
//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传递给子组件
<person :list='personlist' />
子组件中：
//子组件 只接收
import{defineProps}from 'vue'
let v=defineProps(['list']);//v.list;数组内可以是多个
<span>{{list}}</span>//html 可以直接使用
//子组件 接收+限制类型 告诉父组件我只要persons的值
defineProps<list?:persons>()//这个list对应父组件写的参数名称，加?:可以不传
//子组件 接收+限制类型+默认值
//告诉父组件 我要一个persons类型的数组，若不给我就显示默认的值
import{withDefaults}from 'vue'
withDefaults(defineProps<list?:persons>(),{
list:()=>[{id:'001',name:'张三',age:20}]
})
以上三种接收方式。4 vue3的生命周期：
vue2生命周期
创建(创建前beforeCreate 创建完成created)
挂载(挂载前beforeMount 挂载完成mounted)
更新(更新前beforeUpdate 更新完成updated)//页面有更新才执行
销毁(销毁前beforeDestroy 销毁完成destroyed)
vue3生命周期
创建 <script setup>...这里直接写就是创建</setup>
挂载
import{onBeforeMount,onMounted}from 'vue'
onBeforeMount(()=>{...挂载代码}); onMounted(()=>{...挂载完毕代码});
更新
import{onBeforeUpdate,onUpated}from 'vue'
onBeforeUpdate(()=>{...更新代码}); onUpated(()=>{...更新完毕代码});
卸载
import{onBeforeUnmount,onUnmounted}from 'vue'
onBeforeUnmount(()=>{...卸载代码}); onUnmounted(()=>{...卸载完毕代码});
vue3将销毁改为了卸载，创建只有一个方法，直接在setup中写即可，以上还不包括路由的钩子。
原文地址：https://blog.csdn.net/qq_32768235/article/details/135991900
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！