Vue $refs 中的 $el 和 $children 的使用1.document 2. $refs findDom

Vue项目开发过程中，使用UI框架很快捷美观，但是有时候又有些个性化的UI需求，此时就要操作Dom。操作Dom首先要找到具体的Dom，比如document.getElementById,document.getElementByClassName,document.querySelectorAll等等，除了这些还可以使用($refs)的方法来寻找具体的Dom。

1.`document`

这种方法使用起来很方便，在运行在Web页面的所有地方都可以直接使用，但是使用的对象是document, 获取的Dom很基础，很多时候我们需要操作的Dom嵌套的很深，通过一层一层遍历获取Dom的方式很繁琐, 并且很多情况下，还要匹配大量独特的ClassName，来确定这个唯一的Dom，否则缺乏准确性。因此这个并不适合现在的前端开发方式

2. `$refs`

Vue项目中，可以直接使用this.$refs配合$el和$children等属性，递归来获取相应的Dom,这样会简化Dom操作，提高工作效率, 上代码。

findDomByClassName.js

export const findDom = (el,className = "") => {
    if(!el || !className) return; 
    let dom;
    el.$children.find((c) => {
        if(c.$el.className === className) {
            dom = c;
            return true;
        } else if (c.$children.length > 0) {
           dom = findDom(c, className);
           if (dom) {
               return true;
           }
        }
    });
    return dom;
}

然后在你需要的地方调用findDom(this.$refs.['父级Dom的ref名'], '所需Dom的ClassName值')，就可以获取我们需要操作的Dom了。这样能提高获取Dom的效率，并且获取的Dom准确性很高，这样也不会影响到同一个document页面中其他同class名的Dom。

这个方法除了可以与$refs结合使用意外，也可以与Vue directive的钩子函数的el参数结合起来使用。