Vue3学习 Day03

news2025/2/23 19:12:22

标签的ref属性

用ref标记dom元素

取代了用id来标识标签，因为用id来标识标签，如果父组件和子组件中有id一样的，会引起混淆。

用ref标记组件

子组件

向父亲暴露name，age，classroom（非响应式） sex不暴露

父组件

得到子组件的实例，测试按钮用于测试能否获取子组件的数据

测试

TS中的接口，泛型

****************************************************************************************

在src中新建一个和组件文件夹同级的types文件夹，里面写ts文件

定义一个学生接口，用于规范学生内的成员（记得导出）

****************************************************************************************

使用接口规范数据格式

*****************************************************************************************************

集合可用泛型

*************************************************************************************************

age 加上一个 ? 表示这个字段是可选的

没有age也不报错

***************************************************************************

reactive直接传泛型也可以

props的使用(父组件给子组件传数据)

第一种：接收并保存到props里面

父组件

子组件

测试

第二种:接收+限制类型

父组件

同上

如果父组件给出的数据和子组件要求的不一样，会报错

子组件

测试

同上

第三种:

父组件

故意不传myList

子组件

怎么写：第二种情况的语句作为withDefaults的第一个参数，第二个参数用大括号包裹（因为有多个不同类型的数据，是对象）起来，里面 key: value 其中value要用返回值的形式给出（这里用箭头函数）

测试

Vue的生命周期

总的概述

测试Vue3的生命周期

父组件

<!-- 父组件App.vue -->
<template>
    <TestVueLifeCycle></TestVueLifeCycle>
</template>
  
<script lang="ts" setup name="App">
    import TestVueLifeCycle from './components/TestVueLifeCycle.vue';
    import { onBeforeMount,onMounted } from 'vue';


    onBeforeMount(()=>{
        console.log("父-挂载前")
            })
    onMounted(()=>{
        console.log("父-挂载完成")
    })
   </script>

子组件

<template>
<h2>{{ count }}</h2>
<button @click="f1">点我count+1</button>
</template>

<script lang="ts" setup>
    import { ref } from 'vue';
    import { onBeforeMount,onMounted } from 'vue';//挂载前，挂载完成
    import { onBeforeUpdate,onUpdated } from 'vue';//更新前，更新完成
    import { onBeforeUnmount,onUnmounted } from 'vue';//销毁前，销毁完成

    let count=ref(0)
    function f1(){
        count.value++
    }
    
    console.log("setup完成vue2中创建前，创建完成工作")


    onBeforeMount(()=>{
        console.log("子-挂载前")
            })
    onMounted(()=>{
        console.log("子-挂载完成")
    })

    onBeforeUpdate(()=>{
        console.log("更新前")
    })
    onUpdated((()=>{
        console.log("更新完成")
    }))

    onBeforeUnmount(()=>{
        console.log("销毁前")
    })
    onUnmounted(()=>{
        console.log("销毁完成")
    })
</script>