vm.$refs及$el

ref 主要有两种用法：

1、ref 加在普通的元素上，获取页面中所有含有ref属性的DOM元素。

使用的时候用this$refs（ref值） 获取到的是dom元素

2、ref 加在子组件上，用this refs（ref值）方法（） 就可以使用了。

每个组件都有$el属性，用于获取该组件内的html元素，在mounted生命周期中才有效。

vm el获取Vue实例关联的DOM元素)，在mounted生命周期中才有效。

比方说上述想获取自定义组件tabControl，并获取它的OffsetTop。

则需要先获取该组件 , 再取OffsetTop。

在组件内设置 属性 ref='一个名称(tabControl2)', 然后通过 this el来获取组件中的DOM元素

打印ref="chatContent"的dom元素

this refsbot$el拿到组件内的html元素

van-field被当做组件对待,一直以为它得到是dom元素

el 是Vue实例的挂载目标。在实例挂载之后，元素可以用 vm$el 访问。

挂载阶段还没开始的时候， $el 属性是不可见的。Vue生命周期mounted阶段， el 被新创建的 vm$el 替换,这个时候Vue实例的挂载目标确定， DOM渲染完毕。在这个Vue实例当中，也就可以使用 vm$el 访问到 el 了。具体参考 Vue文档API

el 的作用，用于指明 Vue 实例的挂载目标。

重点关注：如果存在 render 函数或 template 属性，则挂载元素会被 Vue 生成的 DOM 替换；否则，挂载元素所在的 HTML 会被提取出来用作模版

参考 >

>

在JavaScript中需要通过documentquerySelector("#demo")来获取dom节点，然后再获取这个节点的值。在Vue中，我们不用获取dom节点，元素绑定ref之后，直接通过this$refs即可调用，这样可以减少获取dom节点的消耗。

this$refs是一个对象，持有当前组件中注册过 ref特性的所有 DOM 元素和子组件实例

当ref和v-for一起使用时，获取到的引用将会是一个数组，包含循环数组源

1子组件code：

2父组件code:

以上就是关于vm.$refs及$el全部的内容，包括:vm.$refs及$el、vue里的$refs属性要注意的点、selenium 获取table中的元素。python等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！