侧边栏壁纸
博主头像
沙漠渔

把過去的累積,善用到當下

  • 累计撰写 490 篇文章
  • 累计创建 295 个标签
  • 累计收到 960 条评论
标签搜索

目 录CONTENT

文章目录

关于vue里的$refs属性可能会出现各种异常的说明

沙漠渔
2022-05-11 / 0 评论 / 0 点赞 / 116 阅读 / 1,783 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-05-11,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

说明

Vue的极大程度的帮助减少了对dom的操作,其中获取元素的方式主要通过添加ref属性,但是当获取this.$refs属性时,稍有不注意就会输出undefined导致我们对dom节点的操作报错。以下列出this.\$refs.xxx为undefined的几种情况记录:

在created里钩子函数中调用

原因:
created()在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始, $el属性目前不可见。所以this.$refs压根就调不到那个dom,因为页面还没有挂载上去。

解决:
在mounted () 钩子函数中调用

注意:
在此种情况中,元素节点一定是直接写在html中的,而不是通过数据或者条件渲染的

数据或条件渲染(v-if,v-show)之后的调用

原因:
$ref本身作为渲染结果被创建,在初始渲染的时候不能访问他们,是不存在的
$refs不是响应式的,只在组件渲染完成后才填充
用于元素或子组件注册引用信息,注册完成,将会注册在父组件$refs对象上
调用对象是否和v-if结合使用
ref不是响应式的,所有的动态加载的模板更新它都无法相应的变化。

解决:
可以通过setTimeOut(()=>
, 0)来实现

补充:

ref的作用是只在当前的vue组件中有效,所以使用ref来获取dom元素,节省了dom的操作又可以实现多个重复组件中的区分,所以获取元素的时候用ref不要直接使用document.getElementById来操作;二者获取到的值是一样的,用ref获取到DOM元素以后还是可以使用document的方法。

ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上;如果在子组件上,引用就指向组件实例

$refs 是所有注册过的ref的一个集合,而$refs相对document.getElementById的方法,会减少获取dom节点的消耗

如果通过v-for 遍历想加不同的ref时记得加 :号,即 :ref =某变量 ;
这点和其他属性一样,如果是固定值就不需要加 :号,如果是变量记得加 :号

示例代码说明:

<template>
  <div>
    <p ref="testText">this is a test data</p>
    <p v-if="msg" ref="msgText">{{msg}}</p>
    <button @click="handleClick">点一下</button>
  </div>
</template>

<script>
import { setTimeout } from 'timers';
export default {
  data () {
    return {
      text: 'message show',
      msg: ''
    }
  },
  created () {
    console.log(this.$refs.testText)    // undefined
    // this.$refs.testText.style.color = '#f00'
  },
  mounted () {
    console.log(this.$refs.testText)  //  <p data-v-5752faac="" style="color: rgb(255, 0, 0);">this is a test data</p>
    console.log(this.$refs.msgText)     // undefined
    this.$refs.testText.style.color = '#f00'
  },
  methods: {
    handleClick () {
      this.msg = 'msg show'
      console.log(this.$refs.msgText)   // undefined
      setTimeout(() => {
        this.$refs.msgText.style.color = '#eee'
        console.log(this.$refs.msgText) // <p data-v-5752faac="" style="color: rgb(238, 238, 238);">msg show</p>
      }, 0)
    }
  }
}
0
广告 广告

评论区