二十四、ref获取DOM

ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。 (1)如果在普通的DOM元素上使用,引用指向的就是DOM元素。 (2)如果用在子组件上,引用就指向组件实例。
<template><!--1、在普通的DOM元素上使用,引用指向的就是DOM元素。-->
    <div class='box1' ref='box1'>第一个盒子</div>
    <div class='box2' ref='box2'>第二个盒子</div>
    <div class='box3' ref='box3'>第三个盒子</div>
</template>
<script>
    //...
    mounted(){
        console.log(this.$refs.box1.innerHTML);//获取box1的内容,支持点的方式获取
                                               //输出结果:第一个盒子
        console.log(this.$refs.box1.parentNode.innerHTML);//获取box1其父元素的内容,支持点的方式获取
                                                          //输出结果:<div class="box1">第一个盒子</div> <div class="box2">第二个盒子</div> <div class="box3">第三个盒子</div>
        console.log(this.$refs['box2'].nextElementSibling);//获取box2其下一个元素的内容,支持中括号的方式获取
                                                           //输出结果:<div class='box3' ref='box3'>第三个盒子</div>
        console.log(this.$refs['box3'].previousElementSibling);//获取box3其上一个元素的内容,支持中括号的方式获取
                                                               //输出结果:<div class='box3' ref='box3'>第三个盒子</div>
        console.log(this.$refs.box1._proto_);//通过这个属性,可以查看我们获取到的DOM元素的所有属性和方法。(注意proto左右两边都是两个相连接的下划线___)
    }
</script>

 

上一篇:DomSize使用


下一篇:uniapp 头部 底部固定 中间滑动