uniapp 在父组件中使用ref属性调用子组件中的方法 报错undefined

项目背景: 项目是自定义底部tabBar,所以这个页面是index(首页的一个子组件ref="pageC")

 现在要求是不管页面滚动到第几页数据,或者每次从详情页以及其他页面回到这个页面时(子组件pageC)内容都要回到顶部
所以我在index的onshow事件里面调用了这个页面(子组件pageC)的回到顶部事件(因为这个页面数据是使用scrollview做的滚动,所以回到顶部设置scrollTop=0)
子组件在index的引用:

在index的onshow中的引用子组件pageC的回到顶部事件 :

this.$nextTick(() => {this.$refs.pageC.subScrollTop() //onshow时保证发现的scrollTop变为0})

pageC中的回到顶部事件:

subScrollTop() {this.scrollTop = 100this.$nextTick(() => {this.scrollTop = 0})},

运行到微信开发者和浏览器报错:

查阅uniapp官网ref属性: uniapp.dcloud.net.cn/tutorial/vue-components.html#ref
发现这个说明:

 解决方案:
1.update阶段则是完成了数据更新到dom的阶段(对加载回来的数据进行处理),此时,就可以使用this.refs了
2.写在method中,使用 this.$nextTick(() => {this.$refs.pageC.subScrollTop()}) 等页面渲染好再调用
3.判断绑定的组件是否存在v-if:由于v-if的存在导致此处组件并不存在,自然ref属性也不存在。
如果使用v-show就可以解决这个问题
由于我的页面情况,我使用第三种方式解决了这个问题
 

<view v-show="tabberPageLoadFlag[2]" :style="{display: currentTabbarIndex === 2 ? '' : 'none'}"><scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower"><page-c ref="pageC" :rightArray="disrightArray" :leftArray="disleftArray" @subDiscover="subDiscover"@disleftLike="disleftLike" @disrightLike="disrightLike" :dataList="discoverList"@discoverSearch="discoverSearch" :page="discoverPage" @discoverReach="discoverReach"@Tochange="changeTabbar(3)"></page-c></scroll-view></view>

只是把判断是否展示组件的v-if换成了v-show 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/83091.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

「提效脚本 redis」 使用Lua批量删除key

在redis里面可以使用keys aa* 进行匹配所有的key&#xff0c;却没办法直接删除所有匹配的key。 所以可以使用lua脚本进行增强。 以删除 suggest* 开头的key为例。 eval "local keys redis.call(keys, suggest*) for _, key in ipairs(keys) do redis.call(del, key) …

华为OD机试 - 求最多可以派出多少支团队 - 双指针(Java 2023 B卷 100分)

目录 专栏导读一、题目描述二、输入描述三、输出描述四、解题思路五、Java算法源码六、效果展示1、输入2、输出3、说明 华为OD机试 2023B卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;A卷B卷&#…

【 Tkinter界面-练习05】 event和bind

一、说明 事件和动作有关&#xff1b;所有的界面都与运动有关&#xff0c;本篇将对事件、事件触发、绑定回调函数等&#xff0c;其实是一系列部件配合的复杂的过程&#xff0c;这些过程牵扯到系统如何设计&#xff0c;线程、消息队列循环等。本篇将详细介绍各种因素的关系。 二…

python经典百题之求分数前N项和

题目&#xff1a;有一分数序列&#xff1a;2/1&#xff0c;3/2&#xff0c;5/3&#xff0c;8/5&#xff0c;13/8&#xff0c;21/13…求出这个数列的前20项之和。 1. 方法一&#xff1a;普通循环 思路&#xff1a;利用循环计算每一项的值&#xff0c;并累加求和。 优点&#x…

vue3创建的官网提示方法

创建: npm create vuelatest 或许会出现提示: 根据官网提示: 意味着我们需要安装或者更新create-vue的版本 后面就可以跟随提示了

【2023年11月第四版教材】第13章《资源管理》(第三部分)

第13章《资源管理》&#xff08;第部分&#xff09; 4 规划资源管理4.1 数据表现★★★4.2 资源管理计划★★★4.2 团队章程★★★ 5 估算活动资源 4 规划资源管理 组过程输入工具和技术输出规划1.规划资源管理1.项目章程2.项目管理计划&#xff08;质量管理计划、范围基准&am…

C++中返回类型与return语句

C中返回类型与return语句 有、无返回值的函数及其return语句 无返回值&#xff08;函数声明中&#xff0c;返回值类型为void&#xff09;的函数&#xff0c;如果其中没有任何return语句也是正确的&#xff0c;编译器会自动在函数结束处补上隐式的return;语句。如果这种void函数…

VOP —— Noise

目录 Turbulent Noise —— 计算1D/3D类型的Noise Anti-Aliased Flow Noise —— 生成抗锯齿噪波 Anti-Aliased Noise —— 生成抗锯齿噪波 Curl Noise —— 创建divergence-free 3D噪波 Curl Noise 2D —— 创建divergence-free 2D噪波 Flow Noise —— 生成1D/3D Perli…

理解Kruskal算法的前提----深入理解并查集【超简单~】

并查集的实现思路 并查集主要分为两个部分&#xff1a;第一部分就是需要找到点对应的祖宗节点&#xff0c;第二部分&#xff0c;是要将属于同一个集合节点的祖宗节点进行统一&#xff0c;也就是结合操作。 Find函数实现 // parent数组用来存储下标值所对应的父节点值 // 比如…

下载安装nvm教程(附带下载切换node.js版本实操)

目录 一、介绍 二、下载 三、安装步骤 四、配置淘宝源 五、测试 六、常用的nvm命令 七、下载切换node版本实操 node版本参考 一、介绍 node版本管理&#xff1a;nvm就是可以切换你的node版本&#xff0c;特别是当node版本过高或者过低时候&#xff0c;就可以用nvm进行…

036:vue导出页面生成pdf文件

第036个 查看专栏目录: VUE ------ element UI 专栏目标 在vue和element UI联合技术栈的操控下&#xff0c;本专栏提供行之有效的源代码示例和信息点介绍&#xff0c;做到灵活运用。 &#xff08;1&#xff09;提供vue2的一些基本操作&#xff1a;安装、引用&#xff0c;模板使…

GIF动图怎么变成jpg动图?一键分解GIF动画

GIF格式图片怎么转换成jpg格式图片&#xff1f;在日常生活中jpg、png转GIF格式非常的常见&#xff0c;那么gif转换成jpg格式应该怎么操作呢&#xff1f;很简单&#xff0c;给大家分享一款gif动态图片制作&#xff08;https://www.gif.cn/giffenjie&#xff09;工具&#xff0c;…

Oracle Schema Only账户

概念 Schema Only Accounts是Oracle 18c的新安全功能&#xff0c;19c进一步增强。 19c的增强其实就是允许此账户有管理权限&#xff1a;Ability to Grant or Revoke Administrative Privileges to and from Schema-Only Accounts A schema only account cannot log in to the…

计算机视觉与深度学习-卷积神经网络-纹理表示卷积神经网络-卷积神经网络-[北邮鲁鹏]

这里写目录标题 参考文章全连接神经网络全连接神经网络的瓶颈全连接神经网络应用场景 卷积神经网络卷积层(CONV)卷积核卷积操作卷积层设计卷积步长(stride)边界填充特征响应图组尺寸计算 激活层池化层(POOL)池化操作定义池化操作作用池化层超参数常见池化操作 全连接层(FC)样本…

设计心理学-日常操作心理学 优漫动游

大师解释了产品设计的几个原则后&#xff0c;接着其实就是解释日常生活中用户操作的心理&#xff0c;从深层次的角度&#xff0c;解释为什么产品设计需要依据这些原则。 设计心理学-日常操作心理学 首先书中提出了一个显而易见的概念&#xff1a;用户习惯自行判断产品的功…

算法通关村 | 透彻理解动态规划

1. 斐波那契数列 1&#xff0c;1&#xff0c;2&#xff0c;3&#xff0c;5&#xff0c;8&#xff0c;13&#xff0c;..... f(n) f(n-1) f(n-2) 代码实现 public static int count_2 0;public int fibonacci(int n){if (n < 2){count_2;return n;}int f1 1;int f2 2;i…

C++入门及简单例子_4

1. 类和对象&#xff1a; #include <iostream> // 包含输入输出流库的头文件class Rectangle { // 定义名为Rectangle的类 private: // 私有成员变量部分double length; // 长度double width; // 宽度public: // 公有成员函数部分Rectangle(double len, double w…

【鸽鸽送书第一期】 | 实现可观测性平台的技术要点是什么?文末参与送书哦!

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏:《粉丝福利》 《C语言进阶篇》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 &#x1f4cb; 前言实现可观测性平台的技术要点是什么&#xff1f;1.兼容全域信号量2.所谓全域信号量有哪些&#x…

Java 对象和类

目录 Java 对象和类 Java中的对象 Java中的类 构造方法 创建对象 访问实例变量和方法 源文件声明规则 Java包 Import语句 一个简单的例子 Java 对象和类 Java作为一种面向对象语言。支持以下基本概念&#xff1a; 多态继承封装抽象类对象实例方法消息解析 本节我们重…

基于AI视觉的表面缺陷检测设备优势显著,加速制造业数智化转型

作为生产制造过程中不可缺少的一步&#xff0c;表面缺陷检测广泛应用于工业领域&#xff0c;包括3C电子、芯片半导体、食品医药、木材等行业。但随着智能化进程加快&#xff0c;制造工厂生产线的质量检测压力加剧&#xff0c;传统人工表面缺陷检测已经无法满足当前社会较高的检…