二十四、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>