前端设计

vue组合api中ref

2024-07-21

ref函数:

一、使用ref的步骤

1、从vue框架中导入ref函数。import { ref } from 'vue';

2、在setup函数中调用ref函数并传入数据(简单类型或者复杂类型), const 响应式数据 =ref(初值) ;

3、把ref函数的结果添加到setup函数的返回对象中。

二、使用ref注意事项

1、ref 函数接收一个的值, 返回一个ref 响应式对象, 有唯一的属性 value

2、在 setup 函数中, 通过 ref 对象的 value 属性, 可以访问到值

3、在模板中, ref 属性会自动解套, 不需要额外的 .value

4、ref函数也支持传入复杂类型,传入复杂类型,也会做响应式处理。

三、用ref函数获取实例对象

步骤1:导入ref函数 import { ref } from 'vue'

步骤2:在setup中, 使用ref函数传入null创建 ref对象 => const hRef = ref(null) 并添加到setup的返回对象中;

步骤3:模板中通过定义ref属性设置为步骤1中创建的ref对象名称建立关联 <h1 ref="hRef"></h1>

步骤4:使用。hRef.value