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

vue3-标签的ref属性,props的使用,vue3的生命周期详解

news 来源：原创 2025/6/18 10:32:21

标签的ref属性

若ref加在HTML上面获取的是`DOM`节点

<template><div class="person"><h1 ref="title1">小聂</h1><h2 ref="title2">学习</h2><h3 ref="title3">vue3</h3><button @click="show">点我输出h1这个元素</button></div>
</template><script lang="ts" setup name="Person">import { ref} from 'vue';//创建title1  用于存储ref标记的内容let title1=ref()function show(){console.log(title1.value)}</script><style>.person{background-color: rebeccapurple;box-shadow: 0 0 10px;padding: 20px;border-radius: 10px;}button{margin: 0 6px;}img{height: 100px;}
</style>

在这里插入图片描述
点击之后成功展示出h1里面的内容

若ref加到组件上面的时候

注意只有里面写了这个defineExpose({x,z}) 才能让父组件看到 x 和z 如果不写则看不到这是vue3的保护措施

<template><h2 ref="title2">你好啊,小聂</h2><button @click="showLog">测试展现</button><Person ref="ren"/>
</template><script lang="ts" setup name="App">
import Person from './components/Person.vue';
import { ref } from 'vue';let title2 =ref()let ren=ref()function showLog(){console.log(ren.value)}
</script><style></style>

<template><div class="person"><h1 ref="title1">小聂</h1><h2 ref="title2">学习</h2><h3 ref="title3">vue3</h3><button @click="show">点我输出h1这个元素</button></div>
</template><script lang="ts" setup name="Person">import { ref,defineExpose} from 'vue';//创建title1  用于存储ref标记的内容let title1=ref()let x=ref(0)let y=ref(1)let z=ref(2)function show(){console.log(title1.value)}//需要告诉父组件  你可以看什么defineExpose({x,z})
</script><style>.person{background-color: rebeccapurple;box-shadow: 0 0 10px;padding: 20px;border-radius: 10px;}button{margin: 0 6px;}img{height: 100px;}
</style>

在这里插入图片描述
如果不写这句话 defineExpose({x,z}) 的结果就是这样的

props的使用

App.vue的内容

<template><Person :list="persons"/>
</template><script lang="ts" setup name="App">import Person from './components/Person.vue';import { reactive } from 'vue';import {type Persons} from '@/types';let persons =reactive<Persons>([{id:'dadadada1',name:'路飞',age:18},{id:'dadadada2',name:'索隆',age:19},{id:'dadadada3',name:'白胡子',age:50}])</script><style></style>

person.vue的内容

1-只接收

<template><div class="person"><ul><li v-for="item in list" :key="item.id">{{item.name}}--{{item.age}}</li></ul></div>
</template><script lang="ts" setup name="Person">import {type personInter} from '@/types'//1-只接收const props=defineProps(['list'])</script><style>.person{background-color: aqua;box-shadow: 0 0 10px;padding: 20px;border-radius: 10px;}button{margin: 0 6px;}img{height: 100px;}
</style>

在这里插入图片描述

2-接收+限制类型

<template><div class="person"><ul><li v-for="item in list" :key="item.id">{{item.name}}--{{item.age}}</li></ul></div>
</template><script lang="ts" setup name="Person">import {type personInter, type Persons} from '@/types'//1-只接收// const props=defineProps(['list'])//2-接收+限制类型defineProps<{list:Persons}>()</script><style>.person{background-color: aqua;box-shadow: 0 0 10px;padding: 20px;border-radius: 10px;}button{margin: 0 6px;}img{height: 100px;}
</style>

在这里插入图片描述
3-接收+限制类型+指定默认值+限制必要性

<template><div class="person"><ul><li v-for="item in list" :key="item.id">{{item.name}}--{{item.age}}</li></ul></div>
</template><script lang="ts" setup name="Person">import {type personInter, type Persons} from '@/types'//1-只接收// const props=defineProps(['list'])//2-接收+限制类型// defineProps<{list:Persons}>()//3-接收+限制类型+指定默认值+限制必要性let props = withDefaults(defineProps<{list?:Persons}>(),{list:()=>[{id:'asdasg01',name:'黑胡子',age:100}]})console.log(props)</script><style>.person{background-color: aqua;box-shadow: 0 0 10px;padding: 20px;border-radius: 10px;}button{margin: 0 6px;}img{height: 100px;}
</style>

在这里插入图片描述

vue3的生命周期

创建阶段
setup
挂载阶段
挂载前 ------- 挂载完毕
onBeforeMount ------- onMounted
更新阶段
更新前 ------- 更新完毕
onBeforeUpdate ------- onUpdated
卸载阶段
卸载前 ------- 卸载完毕
onBeforeUnmount ------- onUnmounted

<template><div class="person"><h1>当前的高度为{{ height }}</h1><button @click="addHeigtht">点我高度加一 </button></div>
</template><script lang="ts" setup name="Person">import { ref,onBeforeMount,onMounted,onBeforeUpdate ,onUpdated,onBeforeUnmount,onUnmounted} from 'vue';let height=ref(0)function addHeigtht(){height.value+=1}onBeforeMount(()=>{console.log('挂载前')})onMounted(()=>{console.log('挂载完毕')})onBeforeUpdate(() => {console.log('更新前')})onUpdated(()=>{console.log('更新完毕')})onBeforeUnmount(()=>{console.log('卸载前')})onUnmounted(()=>{console.log('卸载完毕')})</script><style>.person{background-color: aqua;box-shadow: 0 0 10px;padding: 20px;border-radius: 10px;}button{margin: 0 6px;}img{height: 100px;}
</style>