Vue3组合式Api（二）模板引用，provide和inject

组合式API-模版引用

通过ref标识获得真实dom对象或组件实例对象

使用方法

步骤

1. 调用ref函数生成一个ref对象
2. 通过ref标识绑定ref对象到标签

代码示例

<script setup>

import { ref } from 'vue'

//1.调用ref函数得到ref对象

const h1Ref = ref(null)

</script>

<template>

    <!-- 2. 通过ref标识绑定ref对象 -->

    <h1 ref="h1Ref">我是dom标签h1</h1>
</template>

defineExpose()

默认情况下在<script setup>语法糖下组件内部的属性和方法不开放给父组件访问，可以通过defineExpose编译宏指定哪些允许访问

---

组合式API-provide和inject

作用场景

顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信

跨层传递普通数据

1. 顶层组件通过provide函数提供数据
2. 底层组件通过inject函数获取数据

跨层传递响应式数据

1. 顶层组件通过provide函数提供数据，第二个参数设置为ref对象

2. 底层组件通过inject函数获取数据

跨层传递方法

1. 顶层组件通过provide函数向底层传递方法
2. 底层组件调用方法修改顶层组件中的数据

---

至此，Vue3组合式api的介绍便结束啦