ref，$refs，$el区别

$refs 与 $el 是什么？ 作用是什么?  ref，$refs，$el ，三者之间的关系是什么？看本博主为您带来的最新文章，通过大量的列子来给你讲解，请带上你聪明的大脑，在这个过程中希望你可以举一反三。

ref  (给元素或者子组件注册引用信息)  就像你要给元素设置样式，就需要先给元素设定一个 class 一样，同理，你想获取哪个元素的 DOM，就给这个元素先设定一个 ref，其实这里和 JS 中的 document.各种方法获取 DOM 差不多，不过 ref 是访问 VUE 虚拟出来的DOM，这样可以有效的减少性能消耗

简述三者区别：

ref ：是 元素的属性，用于设置在元素上

$refs ：是 ref 的集合，集合里面包含了当前.vue中的所有 ref

用于获取普通元素中的 DOM 以及 子组件中方法/参数的

$el ：是 用于获取组件内 DOM（包括子组件，当前.vue组件，以及父组件）

 

目录

case 1：点击按钮“确定”触发其他元素上的事件

case 2：页面加载，获取当前.vue文件中整体元素高度

case 3：父组件，调用子组件内的方法/参数（这里的例子是页面加载直接调用）

case 4：什么情况/场景中使用 this.$nextTick(()=>{})，它的作用是什么？

---

 

 

case 1：点击按钮“确定”触发其他元素上的事件

1.  
   <template>
2.  
   <div class="content">
3.  
   <div>
4.  
   <el-button type="success" @click="handleSubmit">
5.  
   確定
6.  
   </el-button>
7.  
   <!-- 设定 ref="passA" -->
8.  
   <el-button ref="passA" type="success" @click="handlePassA">
9.  
   被触发 A
10.  
    </el-button>
11.  
    </div>
12.  
    <!-- 设定 ref="passB" -->
13.  
    <div style="height:40px; width:100px; background: burlywood;"
14.  
    ref="passB" @click="handlePassB">
15.  
    被触发 B
16.  
    </div>
17.  
    </div>
18.  
    </template>

1.  
   handleSubmit(){
2.  
   /*
3.  
   * 有同学看到这里会问：咦，博主，你这里写法为什么不同呀？
4.  
   * 嗯，这位同学不错，问到正题上了，避免了你在实际运用中出现问题
5.  
   * 因为 ref="passA" 的按钮，它是 element ui 提供的组件，
6.  
   * 组件本身不是 DOM，所以需要 .$el 的帮助后才能提取组件的 DOM
7.  
   * 反之，对于提取普通元素上的 DOM ，就不需要了
8.  
   */
9.  
   this.$refs.passA.$el.click()
10.  
    this.$refs.passB.click()
11.  
     
12.  
    console.log(this.$refs)
13.  
    },
14.  
    handlePassA(){
15.  
    console.log('我是 PassA, 我报触发了')
16.  
    console.log('我自己的高度 =>',this.$refs.passA.$el.offsetHeight)
17.  
    },
18.  
    handlePassB(){
19.  
    console.log('我是 PassB, 我报触发了')
20.  
    console.log('我自己的高度 =>',this.$refs.passB.offsetHeight)
21.  
    },

 

case 2：页面加载，获取当前.vue文件中整体元素高度

1.  
   mounted(){
2.  
   /*
3.  
   * 这里通过 this.$el 直接获取当前.vue文件整体 DOM
4.  
   */
5.  
   console.log(this.$el)
6.  
   console.log('我是 当前.vue文件 整体的高度 =>',this.$el.offsetHeight)
7.  
   console.log('我是 PassB 我自己的高度 =>',this.$refs.passB.offsetHeight)
8.  
   },

 这里通过 class=“content” 与上图中控制台输出的 整体DOM最外层的 calss 比照，可以更好的理解

 

case 3：父组件，调用子组件内的方法/参数（这里的例子是页面加载直接调用）

1.  
   <template>
2.  
   <div class="border">
3.  
   <div>我是子组件</div>
4.  
   <input v-model="value">
5.  
   </div>
6.  
   </template>
7.  
    
8.  
   <script>
9.  
   import {mapGetters} from 'vuex'
10.  
    export default {
11.  
    name: 'user-defined',
12.  
    data() {
13.  
    return {
14.  
    value: 0,
15.  
    list: [1,2,3,4]
16.  
    }
17.  
    },
18.  
    methods: {
19.  
    handleAddNum(){
20.  
    console.log('我是子组件里的方法')
21.  
    this.value = this.value + 1;
22.  
    // 获取父组件DOM
23.  
    let parentDom = this.$parent.$el;
24.  
    }
25.  
    }
26.  
    }
27.  
    </script>
28.  
    <style scoped lang="scss">
29.  
    .border{
30.  
    width: 300px;
31.  
    height: 200px;
32.  
    border: 1px solid red;
33.  
    }
34.  
    </style>

1.  
   <template>
2.  
   <div class="content">
3.  
   <div>
4.  
   <el-button type="success" @click="handleSubmit">
5.  
   確定
6.  
   </el-button>
7.  
   <!-- 设定 ref="passA" -->
8.  
   <el-button ref="passA" type="success" @click="handlePassA">
9.  
   被触发 A
10.  
    </el-button>
11.  
    </div>
12.  
    <!-- 设定 ref="passB" -->
13.  
    <div style="height:40px; width:100px; background: burlywood;"
14.  
    ref="passB" @click="handlePassB">
15.  
    被触发 B
16.  
    </div>
17.  
    <!-- 子组件 设定 ref="userDefined" -->
18.  
    <user-defined ref="userDefined"></user-defined>
19.  
    </div>
20.  
    </template>
21.  
     
22.  
    <script>
23.  
    import userDefined from './user-defined.vue' // waves directive
24.  
    import {mapGetters} from 'vuex'
25.  
     
26.  
    export default {
27.  
    name: 'AdminPassword',
28.  
    components: {
29.  
    userDefined
30.  
    },
31.  
    mounted(){
32.  
    // 调用 子组件方法
33.  
    this.$refs.userDefined.handleAddNum()
34.  
    // 调用 子组件list参数
35.  
    console.log(this.$refs.userDefined.list)
36.  
    // 输出 $refs 内的集合
37.  
    console.log(this.$refs)
38.  
    },
39.  
    methods: {
40.  
    handleSubmit(){
41.  
    this.$refs.passA.$el.click()
42.  
    this.$refs.passB.click()
43.  
     
44.  
    console.log(this.$refs)
45.  
    },
46.  
    handlePassA(){
47.  
    console.log('我是 PassA, 我报触发了')
48.  
    console.log('我自己的高度 =>',this.$refs.passA.$el.offsetHeight)
49.  
    },
50.  
    handlePassB(){
51.  
    console.log('我是 PassB, 我报触发了')
52.  
    console.log('我自己的高度 =>',this.$refs.passB.offsetHeight)
53.  
    },
54.  
    }
55.  
    }
56.  
    </script>

case 4：什么情况/场景中使用 this.$nextTick(()=>{})，它的作用是什么？

1.  
   <template>
2.  
   <div class="content">
3.  
   <el-button type="success" @click="handleSubmit">
4.  
   获取下方div中文本
5.  
   </el-button>
6.  
   <!-- 设定 ref="myDiv" -->
7.  
   <div ref="myDiv" style="width: 100px; height: 40px; border: 1px solid red;">
8.  
   {{text}}
9.  
   </div>
10.  
    </div>
11.  
    </template>

1.  
   data(){
2.  
   return{
3.  
   text: '我今年12岁'
4.  
   }
5.  
   },
6.  
   methods: {
7.  
   handleSubmit(){
8.  
   /*
9.  
   * 为什么我打印出来的不是 【我今年13岁】 呢？
10.  
    * 因为 DOM 的值还没有更新完毕，所以这里打印的依然是【我今年12岁】
11.  
    */
12.  
    this.text = '我今年13岁'
13.  
    console.log('打印 =>',this.$refs.myDiv.innerHTML) // 打印结果：我今年12岁
14.  
    }
15.  
    }

 

1.  
   created(){
2.  
   console.log('created =>',this.$refs.myDiv)
3.  
   /*
4.  
   * 因为生命周期执行顺序的缘故，vue 实例刚刚创建完毕 ， DOM 还没有进行渲染，所以
5.  
   * 打印结果：created => undefined
6.  
   * 如果你在这里输出 this.$refs.myDiv.innerHTML 控制台还会报错，提示 myDiv 不存在
7.  
   */
8.  
   this.$nextTick(()=>{
9.  
   console.log('created =>',this.$refs.myDiv.innerHTML)
10.  
    /*
11.  
    * this.$nextTick 监视 DOM 的更新
12.  
    * 会进入 红灯停状态，DOM 更新完毕后，就会进入 绿灯行驶状态
13.  
    * 打印结果：created => 我今年12岁
14.  
    */
15.  
    })
16.  
    },
17.  
    methods: {
18.  
    handleSubmit(){
19.  
    this.text = '我今年13岁'
20.  
    /*
21.  
    * this.$nextTick 的作用是什么？
22.  
    * 它的作用类似：前方道路正在施工，施工完毕后可正常行驶
23.  
    * DOM 更新完毕后，就会执行 this.$nextTick 内的代码
24.  
    */
25.  
    this.$nextTick(()=>{
26.  
    console.log('打印 =>',this.$refs.myDiv.innerHTML) // 打印结果：我今年13岁
27.  
    })
28.  
    }
29.  
    }

 

喂，同学，不错呦，竟然全都看完了，加油！

想要看其他的 case，也可以通过评论或者私聊给我呦！

如果文章对你有帮忙，给博主加个关注，鼓励博主创造出更多的帖子！