Vue3 对 Dom 元素的引用

Vue3中对Dom元素引用

基本引用

在 html 中设置要引用元素的 ref

1<el-form ref="formRef"/>

在脚本中声明并使用

1// 声明对表单的引用
2const formRef = ref();
3//清除表单的验证字段
4formRef.value.clearValidate(['name']);

高级引用

在 html 中设置动态的 ref

1<el-tree :ref="(el) => setTreeRef(el, index)"/>

在脚本中声明并使用

 1//声明存储引用的数组
 2var refTrees = [];
 3// 实现动态设置 ref 的方法,并将引用存储
 4const setTreeRef(el, index) => {
 5    // 判断 dom 元素是否有效
 6    if (el) {
 7        // 以 className 的方式为元素设置标记
 8        el.className = 'ref-tree-' + index;
 9        // 储存到引用数组中
10        refTrees.push(el);
11    }
12}
13// 使用动态引用
14const useTreeRef(index) => {
15    var refTree;
16    refTrees.forEach((item) => {
17        // 通过 className 获取dom
18        if (item.className == 'ref-tree-' + index){
19            refTree = item
20        }
21    });
22    refTree.setCheckedKeys([checked],true);
23}