uniapp 在 onLoad 事件中 this.$refs 娶不到的问题

最新推荐文章于 2024-07-12 16:40:32 发布
最新推荐文章于 2024-07-12 16:40:32 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： 前端 uniapp 文章标签： uni-app 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/souwer/article/details/132714477
版权

现象

本人想在主页面加载的时候调用子组件的方法。示例代码如下：
在这里插入图片描述运行，发现 this.$refs 取不到。如下图所示：
在这里插入图片描述
解决方法，把onLoad 换为 onReady 就可以了。
在这里插入图片描述

程序员岩哥
关注
专栏目录
uniapp 微信小程序this.$refs返回空对象，这个是因为uniapp的ref属性不能用在uniapp的内置组件上面，只能用在自定义组件上面
qq_42859450的博客
02-23 7763
<template> <view class="pl24 pr24 fz30" @click="click" ref="test"> <evaluate/> </view> </template> <script> import evaluate from "./cancelOrder.vue" export default{ components:{evaluate}, methods: { click(){
uni-app基础知识补充
wzy199982的博客
11-30 1423
vuex、常用的api、常用的组件、自定义组件、第三方组件的使用
uniapp开发：“this.$refs.xxxx“调用子组件无效的可能原因
一名假人的博客
07-20 7578
"this.$refs.xxxx"调用子组件无效的可能原因 1. ref绑定的对象是否正确 <templete> <view ref="child"></view> </templete> <script> export default { onLoad(){ // 会报 "child is undefined" 的问题 console.log(this.$refs.child) } } </script>
uniapp微信小程序 TypeError: $refs[ref].push is not a function
最新发布
qq_44792224的博客
07-12 656
【代码】uniapp微信小程序 TypeError: $refs[ref].push is not a function。
uniapp中在onload用this.$refs获取不到值
m0_72822997的博客
03-19 1199
解决办法：在onReady中调用this.$refs。onReady页面初次渲染时触发，此时Dom已经渲染完成，因此this.$refs可以正确获取到Dom或组件的引用。原因：因为onload是在页面加载时触发，此时可能Dom还未完全渲染，因此this.$refs可能还无法正确获取到Dom或组件的引用。
uni-app开发中 this.$refs 用不了
热门推荐
m0_50015961的博客
01-04 2万+
"this.$refs.xxxx"调用子组件无效的可能原因 1. ref绑定的对象是否正确 <templete> <view ref="child"></view> </templete> <script> export default { onLoad(){ // 会报 "child is undefined" 的问题 console.log(this.$refs.child) } } </script>
uni-app中onLoad不起作用
weixin_44432813的博客
06-05 2304
问题还原：项目使用uniapp开发，前端ui框架用的colorui，公共页面为（pages/index/index），真正的首页是在pages/index/main。 背景介绍完毕，根据设计图首页有个堆叠式轮播，引入colorui堆叠式轮播在小程序页面测试，pages/index/main轮播没有问题，pages/index/index页面轮播不生效，经过打印参数发现，页面加载完成执行初始化数据（以下代码），根本没有执行 onLoad() { this.TowerSwiper('TowerList
uniapp关于this.$refs.xxx获取组件出现undefined的解决方法
陆撄宁的博客
08-21 1万+
项目场景： 开发一个产品使用到比较复杂且独立的自定义组件，自定义组件是自定义复选框/单选框 问题描述： 用ref 注册子组件，父组件可以通过this.$refs.xx.fn调用子组件里的函数，但是有时会出现 undefined 未定义的情况。 vue代码 <view class="sg-checkbox"> <helang-checkbox ref="checkbox" @change="onChange"></helang-checkbox> </view&gt
关于uniapp中，onLoad函数内this指向undefined的解决
qq_53336526的博客
08-22 3729
关于uniapp中，onLoad函数内this指向undefined的解决
js vm报错_uni-app v3版本更新常见问题排查
weixin_34504277的博客
01-17 1427
uni-app v3版本更新常见问题排查组件不显示或者功能异常原因：组件内使用了 onReady，onReady 是页面的生命周期，不应在组件中直接使用，组件中应该使用 mounted 生命周期解决方法：onReady 改为 mounted更新组件状态，视图不更新原因：使用了 vue 无法观测的数组更新方式(如：this.array[0]=object)，相关文档解决方法：改为可以观测的数组更新方...
解决 uni-app 自定义组件在支付宝小程序中无法使用 ref 的问题
qq_41764063的博客
09-16 3090
解决 uni-app 自定义组件在支付宝小程序中无法使用 ref 的问题 uniapp自定义组件refs微信小程序没问题，支付宝小程序不能运行 问题描述: 部分代码如下： 父组件: <template> <view> <pop-ui ref="saveRef" direction="center" :is_close="false" :is_mask="true" :width="80" ></pop-ui> </view> </
小程序预览PDF文件插件Pdf.js
11-20
在Uniapp中，我们需要先在项目的`static`或`assets`目录下存放Pdf.js库，并将其引用路径添加到项目的配置文件中。例如： ```javascript // uniapp.config.js module.exports = { // ... staticFileGlob: ['**/*.{...
HQChart--uniApp v3 中使用 render.js
qq_20964509的博客
06-15 1872
HQChart--uniApp v3 中使用 render.js前言代码使用 前言 由于uniApp 官方升级了v3编译器，升级后不知道为什么会导致官方提供的画图工具变得特别慢~也就是卡，导致之前写的 HQChart用的页面打开特别卡，所有使用render.js可以大幅度提升流畅度。 使用前要看看这个：renderjs是一个运行在视图层的js。它比WXS更加强大。它只支持app-vue和h5。 uniapp插件市场hqchart地址 要用到里面的 umychart.uniapp.h5.js 文件 将其放在
解决uniapp打包到抖音小程序获取不到$refs的问题
mango339的博客
03-05 990
今天用uniapp的框架打包项目到抖音小程序的时候，突然发现$refs获取不到了，一开始惯性使用$nextTick去获取，依旧不行，查了一下资料，发现可能是v-if造成的问题，获取实例的时候，元素还没渲染完全，网上主流解决方法就是在onReady里面的去获取，但依旧失败。后面转念一想，使用v-show去代替v-if，众所周知，v-if是控制元素是否存在页面，v-show是控制元素的hidden属性，如果用v-show去控制，就会完美避开渲染期间元素不存在获取不到$refs的问题！
uniapp onLoad拿不到this.$refs[‘***‘].open()的问题
weixin_44908506的博客
11-25 627
open（）調不起来
uniapp与vue原生this.$refs
qq_43505774的博客
05-12 3057
获取dom节点，如果你是放在组件里面获取， 就可以得到如下的信息 组件都继承了vue的api方法 "$attrs": ​子组件接收父组件不在props定义的数据 "$children": Array []//子组件信息 "$createElement": function $createElement(a, b, c, d)​//创建节点 如果单单只在HTML标签里面就只有element元素节点的dom信息 "$el": <a class="el-link el-link--default is-un
uni-app |onLoad方法中调用其他方法或者属性无效
兀坐晴窗独饮茶
04-29 2560
问题 在 onload 方法中调用其他的方法或者属性都会显示这个属性或者方法未定义!! 我依稀记得我以前用就可以, 然后查看了以前的代码 可以正常使用的 onLoad(option) { this.getPageInfo(option); }, 无法正常使用的写法! onLoad: (option) => { this.getPageInfo(option); } 原因 未知 ! ...
解决uni-app的TypeError: this.$refs.子组件名.子组件方法 is not a function
BelleLinQ的博客
02-01 2853
解决uni-app： this.$refs.子组件名.子组件方法 is not a function
uniapp使用this.$refs.content.addEventListener提示 addEventListener is not a function 错误
weixin_52256715的博客
07-14 1977
这是因为在 Vue 中，$refs 是一个对象，它直接引用组件实例或 DOM 元素，而不是原生的 DOM 元素。要解决这个问题，可以使用 $el 属性来访问原生的 DOM 元素，然后再使用 addEventListener。通过使用 $el 属性，可以访问到 this.$refs.content 的原生 DOM 元素，并且可以正确地使用 addEventListener。
监听 vue中this.$refs.iframe.src 加载完成内嵌页面
07-23
要监听 Vue 中的 `this.$refs.iframe.src` 加载完成内嵌页面，可以使用 `onload` 事件来实现。请按照以下步骤进行操作： 1. 在模板中，给 iframe 元素添加 `ref` 属性以便在 Vue 实例中引用它： ```html <iframe ref="iframe" :src="iframeSrc" @load="handleIframeLoad"></iframe> ``` 2. 在 Vue 实例中，定义 `iframeSrc` 数据属性，并在需要加载 iframe 页面时修改该属性的值： ```javascript data() { return { iframeSrc: '' }; }, methods: { loadIframe() { // 修改 iframeSrc 的值触发重新加载 this.iframeSrc = 'your-iframe-src'; }, handleIframeLoad() { // iframe 加载完成后的操作 // 在这里可以判断加载完成的逻辑 console.log('iframe加载完成'); } } ``` 3. 当需要加载 iframe 时，调用 `loadIframe` 方法： ```javascript mounted() { this.loadIframe(); } ``` 通过监听 `@load` 事件来触发 `handleIframeLoad` 方法，在该方法中可以执行加载完成后的操作。当 iframe 加载完成时，`handleIframeLoad` 方法会被触发，您可以在该方法中进行需要的操作。 这样，您就可以监听 Vue 中的 `this.$refs.iframe.src` 加载完成内嵌页面了。如果有任何进一步的问题，请随时提问。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值