带你了解vue的$refs和ref（附带常见问题）

ゝ一纸荒年。 2022-09-11 05:29 323阅读 0赞

### $ref和ref ###

*  $refs和ref的使用
 *  $refs和v-for一起使用
 *  $ref不生效问题

# $refs和ref的使用 #

通过vue的官方文档说明：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAdHNlbmfojZLnlLc_size_20_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAdHNlbmfojZLnlLc_size_20_color_FFFFFF_t_70_g_se_x_16 1]

例子

<template>
        <div>
            <HomeLeft ref="homeleft" id="children"></HomeLeft>
            <div>
                <button class="color_red" @click="hanldChildrenReduceNumber()">我是父组件的-号</button>
            </div>
        </div>
    </template>
    
    <script>
    import HomeLeft from "@/components/home/left.vue"
    export default { 
        name:'name',
        components:{ 
            HomeLeft
        },
        methods: { 
            hanldChildrenReduceNumber(){ 
                this.$refs.homeleft.hanldReduceNumber()
            }
        }
    }
    </script>

<template>
      <div class="hello">
          <div>{ { allNumber}}</div>
          <button class="color_green" @click="hanldAddNumber()">我是子组件的+号</button>
      </div>  
    </template>
    
    <script>
    export default { 
      name: 'demo',
      props:{ 
    
      },
      data () { 
        return { 
            allNumber:0
        }
      },
      methods: { 
          hanldAddNumber(){ 
              this.allNumber++
          },
           hanldReduceNumber(){ 
              this.allNumber++
          },
      }
    }
    </script>
    
    <style scoped>
    
    </style>

效果图：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAdHNlbmfojZLnlLc_size_12_color_FFFFFF_t_70_g_se_x_16]  
无论我们点击哪个button，都会改变子组件中的allNumber的值  
只不过，实现方式不同而已  
ref和$refs其实就是通过操作DOM和它的实例

我们打印 this.$refs.homeleft可以得到  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAdHNlbmfojZLnlLc_size_20_color_FFFFFF_t_70_g_se_x_16 2]

*  其中的 $ el 就是我们的dom，即 this.$ refs.homeleft.$ el 其实和 document.getElementById(“children”)一样
 *  而如果我们要选择调用子组件事件，那么通过原生的写法，就会写的很复杂，而且很消耗节点
 *  this.$refs.homeleft除了绑定dom，还有其组件的实例，因此写法上会很简单。

# $refs和v-for一起使用 #

当我们在v-for中使用ref，如下面的代码，会出现报错

<template>
        <div>
            <HomeLeft ref="homeleft" id="children" v-for="item in 5" :key="item"></HomeLeft>
            <div>
                <button class="color_red" @click="hanldChildrenReduceNumber()">我是父组件的-号</button>
            </div>
        </div>
    </template>
    
    <script>
    import HomeLeft from "@/components/home/left.vue"
    export default { 
        name:'name',
        components:{ 
            HomeLeft
        },
        methods: { 
            hanldChildrenReduceNumber(){ 
                this.$refs.homeleft.hanldReduceNumber()
                console.log(this.$refs.homeleft)
            }
        }
    }
    </script>

![在这里插入图片描述][bd4bacc0b1c6451696697d2f09ed4a7f.png]  
为什么会这个错误呢，那是因为this.$refs.homeleft变成了一个数组。  
![在这里插入图片描述][58cf4051ee4349408c41174e81ac4792.png]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAdHNlbmfojZLnlLc_size_16_color_FFFFFF_t_70_g_se_x_16]  
此时我们会根据两方面来解决

*  方法一  
    把 this.$ refs.homeleft.hanldReduceNumber() 改成  
    this.$refs.homeleft\[0\].hanldReduceNumber()  
    或者使用for循环是其父组件控制所有子组件的hanldReduceNumber事件
 *  方法二  
    给ref唯一标识，例如:ref="`homeleft_${item}`"  
    this.$refs.homeleft\_1.hanldReduceNumber()父组件即可调用子组件的hanldReduceNumber事件

# $ref不生效问题 #

*  当我们在生命周期beforeCreate、created和、beforeMount、mounted中直接使用$refs并取不到ref的值
 *  在v-if中取不到ref

取不到ref的最终原因都是因为DOM没有生效，因此我们需要vue中一个神方法帮我们解决，就是**this.$nextTick**

this.$nextTick：回调延迟到下次 DOM 更新循环之后执行  
我们看官方说明：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAdHNlbmfojZLnlLc_size_20_color_FFFFFF_t_70_g_se_x_16 3]

> 原创不易，欢迎点赞收藏

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAdHNlbmfojZLnlLc_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/48da916f04f84902b61428f25c522738.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAdHNlbmfojZLnlLc_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/77ecdfff1fb44a749a6f9f437be9c949.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAdHNlbmfojZLnlLc_size_12_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/d1852e29ac814a65ba002b9eac0b9746.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAdHNlbmfojZLnlLc_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/861ba895b8164a95ba259e7efffcb72e.png
[bd4bacc0b1c6451696697d2f09ed4a7f.png]: /images/20220828/acbfb8fdc3364e70a698420249fb2a0d.png
[58cf4051ee4349408c41174e81ac4792.png]: /images/20220828/7f3536769ae840598d3f459f60863333.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAdHNlbmfojZLnlLc_size_16_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/18e4fbe1285a4d4e901ca35be74fdd34.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAdHNlbmfojZLnlLc_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/4a9428b3e5d248179161d35d10832f94.png