vm.$refs及$el

一 vm.$refs

ref 主要有两种用法：
1、ref 加在普通的元素上，获取页面中所有含有ref属性的DOM元素。
使用的时候用this.$refs.（ref值）获取到的是dom元素

（如vm.$refs.hello，获取页面中含有属性ref = “hello”的DOM元素，如果有多个元素，那么只返回最后一个）

2、ref 加在子组件上，用this. $refs.（ref值）获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this.$ refs.（ref值）.方法（）就可以使用了。

ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。

二 vue组件的$el属性

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

<template>
<tab-control ref="tabControl"></tab-control>
</template>
<script>
import tabControl from './tabControl'
export default {
components:{
     tabControl
}
mounted(){
     console.log(this.$refs.tabControl.$el)
 }
}
</script>

image.png

三 vue的实例属性$el

vm. $el 用于获取vue挂载的实例的dom对象 (即vm.$ el获取Vue实例关联的DOM元素)，在mounted生命周期中才有效。

ref属性，获取组件的时候要用$refs

<tab-control  ref = 'tabcontrol'></tab-control>

// 获取offsetTop
this.tabOffsetTop = this.$refs.tabcontrol.$el.offsetTop

比方说上述想获取自定义组件tabControl，并获取它的OffsetTop。
则需要先获取该组件 , 再取OffsetTop。

在组件内设置属性 ref='一个名称(tabControl2)', 然后通过 this. $refs.tabcontrol拿到该组件获取 OffsetTop，组件不是DOM元素，是没有OffsetTop的，无法通过点 .OffsetTop来获取的。需要通过$ el来获取组件中的DOM元素

注意 => vue组件的 $el 属性与 vue的实例属性$ el 的区别

<div class="" ref="wrap">
        <div class="onlineService" ref="chatContent">
            <ul class="verify-ul" v-bind:style="marginBot" ref="chat">
                <li v-for="(row,index) in List" :key="index">
                    <div class="verify-AI" v-show="row.type=='AI'">
                        <img src="@/assets/image/company/Ai.png">
                        <i class="verify-leftArrow"></i>
                        <span>{{row.msg}}</span>
                    </div>
                    <div class="verify-Mine" v-show="row.type=='Mine'">
                        <span>{{row.msg}}</span>
                        <i class="verify-rightArrow"></i>
                        <img src="@/assets/image/bank/ansh-bank.png">
                    </div>
                </li>
            </ul>
        </div>
        <div class="verify-bot sWrap">
            <van-field ref="bot" @input="change" v-model="message" :rows="rows" autosize type="textarea" placeholder="请输入留言" />
            <img @click="send" src="@/assets/image/company/send.png">
        </div>

    </div>

mounted(){
            // 打印ref="chatContent"的dom元素
            console.log('222',this.$refs.chatContent)
        },

methods:{
    change(val) {
                this.marginBot.marginBottom = this.$refs.bot.$el.clientHeight + 30 + 'px';
                console.log('11111',this.$refs.bot)
                console.log('11122',this.$refs.bot.$el)
            }
}

打印ref="chatContent"的dom元素

image.png

this. $refs.bot拿到的是组件和this.$ refs.bot.$el拿到组件内的html元素
van-field被当做组件对待,一直以为它得到是dom元素

image.png

四 vue中el和$el的区别

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 会被提取出来用作模版

参考 https://blog.csdn.net/zhangfeng1742/article/details/82977447

最后编辑于：2020.08.25 14:25:37