解决 Vue 使用 $ref 调用子组件方法时的控制台报错

解决 Vue 使用 $ref 调用子组件方法时的控制台报错报错原因解决办法报错原因代码和控制台报错this.$refs.chatting.getMessageLib()上述报错大多出现在操作弹窗子组件的页面元素的情景中，原因是子组件还未渲染到父组件的 DOM 中，就开始对子组件的元素进行操作了解决办法解决办法是把 ref 方法放到 vue 的内置函数中，$nextTick 可以等待 DOM 渲染完

繁华尽头满是殇

3063人浏览 · 2022-02-16 21:59:29

繁华尽头满是殇 · 2022-02-16 21:59:29 发布

解决 Vue 使用 $ref 调用子组件方法时的控制台报错

报错原因
解决办法

报错原因

代码和控制台报错, Uncaught TypeError: Cannot read properties of undefined

this.$refs.chatting.getMessageLib()

在这里插入图片描述

上述报错大多出现在操作弹窗子组件的页面元素的情景中，原因是子组件还未渲染到父组件的 DOM 中，就开始对子组件的元素进行操作了

解决办法

解决办法是把 ref 方法放到 vue 的内置函数中，$nextTick 可以等待 DOM 渲染完成后在调用里面的方法，这样控制台就不会出现报错了。

this.$nextTick(() => {
    this.$refs.chatting.getMessageLib()
})

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^