标签：el console log DOM refs 组件 ref

$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，也可以通过评论或者私聊给我呦！

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

   

标签：el,console,log,DOM,refs,组件,ref
来源： https://www.cnblogs.com/fanwenyan/p/16265325.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。