1.生命周期函数
生命周期函数,从组件的创建到销毁阶段,在特定时间被自动调用的函数。
使用:
- 导入生命周期函数
- 执行生命周期函数,传入回调
-
生命周期函数执行多次的时候,会按照顺序依次执行,可以多次执行
2.父子通信
2.1父传子
基本思想(和vue2类似)
编译器宏函数 defineProps
- 父组件中给子组件绑定属性
- 子组件内部通过props选项接收数据
例:
2.1子传父
格式:
- 父组件中给子组件标签通过@绑定事件
- 子组件内部通过 emit 方法触发事件
-
- const emit = defineEmits(['事件名1', '事件名2'])
- emit('事件名1', 值1)
例:
2.3 模板引用
定义:通过ref标识获取真实的dom对象或者组件实例对象
基本使用-普通元素
步骤:
- 调用ref函数生成一个ref对象
- 通过ref标识绑定ref对象到标签
- 组件挂载完成之后,可以拿到值
<script setup> import { onMounted, ref } from 'vue' // 1. 调用ref函数得到ref对象 const refDiv = ref(null) // 3. 组件挂载完成之后,可以拿到值 onMounted(() => { console.log(refDiv.value) }) </script> <template> <!-- 2. 通过ref标识绑定ref对象 --> <div ref="refDiv">标题</div> </template>
注意,只有当组件挂载完成之后,才能获取到值
进阶使用-组件元素
<script setup> import MyCom2 from './my-com2.vue' import { onMounted, ref } from 'vue' // 1. 调用ref函数得到ref对象 const refCom2 = ref(null) // 3. 组件挂载完成之后,可以拿到值 onMounted(() => { console.log('com2', refCom2.value) }) </script> <template> <!-- 2. 通过ref标识绑定ref对象 --> <MyCom2 ref="refCom2" /> </template>my-com2.vue
<script setup> import { ref } from 'vue' const num = ref(100) </script> <template> <div>com2内部的数据{{ num }}</div> </template>
注意:默认情况下,我们不能通过对组件的引用拿到组件内部的数据
defineExpose
默认情况下在 <setup>语法糖下组件内部的属性和方法是不开放给父组件访问的,可以通过defineExpose编译宏指定哪些属性和方法容许访问
说明:指定num属性可以被访问到
2.4组合式API - provide和inject
作用:顶层组件向任意的底层组件传递数据和方法,实现跨层组件通信
用法:
- 顶层组件通过
provide
函数提供数据 - 底层组件通过
inject
函数接收数据
跨层传递响应式数据
在调用provide函数时,第二个参数设置为ref对象
跨层传递方法(底层----->顶层)
顶层组件可以向底层组件传递方法,底层组件调用方法修改顶层组件的数据