Vue.js核心技术解析与uni-app跨平台实战开发学习笔记 第12章 Vue3.X新特性解析 12.9 Refs 模板

Vue.js核心技术解析与uni-app跨平台实战开发学习笔记

第12章 Vue3.X新特性解析

12.9 Refs 模板

Refs模板用于获取页面DOM元素或者组件，与Vue2.x的$refs类似。

Refs模板的使用方法：

1. 在setup()中创建ref对象，其值为null
2. 为元素添加ref属性，其值为步骤1中创建的ref对象名
3. 完成页面渲染之后，获取DOM元素或者组件。

举个栗子：

创建新组件ComRefDom.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

使用Refs模板获取组件，创建ComRef组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

在App父组件中引用ComRef子组件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

运行效果：

通过ref，可以在父组件中直接调用子组件中的数据和方法。